JqueryUI作为一个优秀的前端库，被广泛的应用在项目中。之前做的一个排班考勤系统，跟时间打交道较多，对时间控件做过一些对比，觉得jqueryUI里的这个datepicker更为实用，配置起来也简单方便，现在终于抽出时间些点博客做些相关总结，温故知新，也方便以后项目中再次使用。

1，引入js，css

这个大概不需多说，datepicker是基于jqueryUI的控件，而使用jqueryUI肯定要先引入jquery.js

2，配置属性

在刚刚接触这个插件前，我也是网上各种找资料，但是找的大多都比较杂，各种属性全盘有序无序的列出来，挑不出重点。其实我们一个日常的使用不需要那么多，为了快速查看并使用，我这里直接在方法体列举用得最多的几个属性：

3，常用事件

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

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

 

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

      

html：

js：

$("#schduleDateStart").datepicker({            onSelect:function(dateText,inst){               $("#schduleDateEnd").datepicker("option","minDate",dateText);            }        });$("#schduleDateEnd").datepicker({            onSelect:function(dateText,inst){                $("#schduleDateStart").datepicker("option","maxDate",dateText);            }        });

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

4，汉化：

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

/* Chinese initialisation for the jQuery UI date picker plugin. */jQuery(function($){    $.datepicker.regional['zh-CN'] = {        closeText: '关闭',        prevText: '<上月',        nextText: '下月>',        currentText: '今天',        monthNames: ['一月','二月','三月','四月','五月','六月',        '七月','八月','九月','十月','十一月','十二月'],        monthNamesShort: ['一','二','三','四','五','六',        '七','八','九','十','十一','十二'],        dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],        dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],        dayNamesMin: ['日','一','二','三','四','五','六'],        dateFormat: 'yy-mm-dd', firstDay: 1,        isRTL: false};    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);});

 

5，控件效果图：