jQueryUI中的datepicker使用方法详解

前端之家收集整理的这篇文章主要介绍了jQueryUI中的datepicker使用方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。

之前做的一个排班考勤系统,跟时间打交道较多,对时间控件做过一些对比,觉得jqueryUI里的这个datepicker更为实用,下面抽点时间给大家整理,方便以后查阅,同时也希望能帮助到大家!

1,引入js,css

3,常用事件

datepicker提供了相关事件,在实际开发中最常用的无非就是这三个,打开前beforeShow,关闭后onClose,onselect选中,我们可以通过控制台打印相关参数调试一下具体怎么使用,这样更能加深对插件的认知:

显示面板之前 console.log("beforeShow,input",input); },onClose : function(dateText,inst){//当日期面板关闭后触发此事件(无论是否有选择日期) console.log("onClose,dateText); console.log("onClose,inst); } });

这里说一下onselect事件,一般我们实际项目中都会两个日期选择框,如一个开始日期,一个结束日期。那么我们肯定是会要做开始日期必须小于结束日期的校验,而我们通过onselect事件去改变另外一个日期框的最大/小日期即可做到输入的控制,如图:

html:

js:

注意:当我们绑定onselect事件后,这个文本框如果原来有的change事件会失效,或者说被覆盖,所以要将原来change事件后操作代码移到onselect事件的回调函数里面。

4,汉化:

到此为止,我们基本可以在实际项目中使用这个控件了。但是很遗憾,这个控件是老外开发的,所以底层肯定是英文的,这样用户体验肯定不好,所以我们需要引入一个zh-CN.js对控件汉化。代码很简单,当然像pervText,nextText这些我们也可以根据自己的需求做相关修改

关闭',prevText: '<上月',nextText: '下月>',currentText: '今天',monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],monthNamesShort: ['一','二','三','四','五','六','七','八','九','十','十一','十二'],dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],dayNamesMin: ['日','一','六'],dateFormat: 'yy-mm-dd',firstDay: 1,isRTL: false}; $.datepicker.setDefaults($.datepicker.regional['zh-CN']); });

5,控件效果图:

以上所述是小编给大家介绍的jQueryUI中的datepicker使用方法详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的jQuery相关文章