最近开发用Simple jQuery Date-picker Plugin做jQuery的日历控件,样式简单,功能强大。但仍有一些不足。比如:控件不是中文;控件必须要有一个input文本框,才能触发事件。而且,获得时间后,缺乏回调函数,不能够进行接下来的操作。.
控件示例如下:
我修改源代码之后,都一一解决了这些问题。示例如下:
1.修改了显示中文问题。这个好改,源文件中找到相应的字符改过来就行。然后导入js时,加入charset="GB2312"。
2.修改了点击文字也能弹出日期。比如显示:2010年11月1日。点击它就可以修改
这里我做了一个隐藏文本框,当日也可以将点击的对象(2010年11月1日)修改成选择的日期。
源文件中加入:
var showname;
var flag;
if(typeof(opts.showname)!='undefined'){
flag = opts.showname;
}else{
flag = 'input';
}
if (jQuery(this).is(''+flag+'')){
var hidetext;
if (dateObj && dateObj.constructor == Date){
if(typeof(opts.hidetext)!='undefined'){
$(''+opts.hidetext+'').val(jQuery.fn.simpleDatepicker.formatOutput(dateObj));
}else{
el.val(jQuery.fn.simpleDatepicker.formatOutput(dateObj));
}
}
加入回调函数
if(typeof(opts.submit)!='undefined')opts.submit();
页面调用时:js这样写
$('#kk').simpleDatepicker({showname:'#kk',hidetext:'#one',submit:subDate});
function subDate(){
var nowDate = $('#one').val();
if(nowDate!="")alert(nowDate);
}
HTML页面:
<div style="width:300px;height:30px;color:blue;">
<span style="cursor:pointer;" id="kk">点击此行文字获得日期<input class="one" id="one" type="hidden" name="date1" value="" /></span>
</div>
附上源文件,供大家下载,详细查看。
分享到:
相关推荐
将jQuery 日历控件simple jQuery date-picker plugin进行了一些修改。支持中文;支持点击div也显示控件;支持回调函数。
NULL 博文链接:https://chen-miao.iteye.com/blog/1223046
上次已经传过一个,这次修改更加彻底,更加方便,更加符合国内开发者使用。具体修改如下: 1、修改星期几为中文显示 2、修改日期显示,由之前的月/日/年,改为年/月/日 3、新增参数sign,可修改中间的间隔符。...
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图,方便没有vip的小伙伴下载
date-picker 基本jquery的时间插件 , 多种模式, 非常好用
主要介绍了vue element-ui el-date-picker如何限制选择时间为当天之前,文中给大家提供了代码段和截图,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
element UI el-date-picker组件样式更改 popper-class="down-time" 原码是body下的弹出器
修改后的增加时间步长
时间选择器,可以选择时间段内的时间,有效提高jsp代码
jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制它的皮肤。它的兼容性非常好,支持IE6+的IE浏览器。
jQuery Date Range ...g npm安装gulp v3.9.1(全局安装) npm install -g gulp@3.9.1克隆此项目git clone https://github.com/longbill/jquery-date-range-picker.gitcd jquery-date-range-picker安装本地依赖项npm
前端项目-tiny-date-picker,一个小型的、无依赖关系的日期选取器
jQuery省市区三级联动插件city-picker,省市区三级联动demo
查找v1文档暗模式演示版安装纱yarn add vue-ctk-date-time-picker NPM npm i --save vue-ctk-date-time-picker用法ES6模块/ CommonJS import VueCtkDateTimePicker from 'vue-ctk-date-time-picker' ;import 'vue-...
Unobtrusive JavaScript date-picker widgit汉化版,date-picker汉化版
React本机日期选择器 这是一个具有以下主要功能的React Native Date Picker: ...npm install react-native-date-picker或yarn add react-native-date-picker (cd ios && pod install) (如果您使用的是CocoaPod
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制,如果屏幕显示不全,顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
jQuery Date Range Picker
jquery.datePicker日历控件应用text文本框弹出日历表与默认显示日历表 jquery.datePicker日历控件应用input:text文本框弹出日历表选择日期时间,设置默认显示日历表展示。jquery日历控件下载。
date-picker, 梯度依赖