jQueryUI中的datepicker使用方法详解(jquery.data)

编辑：rootadmin

推荐整理分享jQueryUI中的datepicker使用方法详解(jquery.data)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery.data,jquery data-id,jquery.data,jquery.data,jqueryui datepicker,jquery.data,jquery datepicker,jqueryui datepicker,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

1，引入js，css

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

2，配置属性

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

3，常用事件

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

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

html：

js：

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

4，汉化：

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

5，控件效果图：

以上所述是小编给大家介绍的jQueryUI中的datepicker使用方法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！

jquery按回车键实现表单提交的简单实例本文章在给大家介绍在用户输入完信息之后直接按回车进行表单提交的jquery实现方法，有需要了解的朋友可进来参考以。键盘事件有3：jquery键盘事件参

jquery的ajax提交form表单的两种方法小结(推荐) jquery的ajax提交form表单的两种方法小结(推荐)方法一：functionAddHandlingFeeToRefund(){varAjaxURL="../OrderManagement/AjaxModifyOrderService.aspx";alert($('#formAddHandlingFee').serial

jQuery短信验证倒计时功能实现方法详解本文实例讲述了jQuery短信验证倒计时功能实现方法。分享给大家供大家参考，具体如下：!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""

标签: jquery.data

本文链接地址:https://www.jiuchutong.com/biancheng/387270.html 转载请保留说明！

上一篇：jQuery+PHP实现微信转盘抽奖功能的方法(php jquery教程)

下一篇：jquery按回车键实现表单提交的简单实例(js按下回车键时提交)