JqueryUI作为一个优秀的前端库，经常在项目中使用。下面小编就花点时间给大家介绍一下如何在jQueryUI中使用datepicker的详细说明。让我们看一看。
JQuery UI非常强大，Datepicker插件是一个配置灵活的插件。我们可以定制它的呈现方式，包括日期格式、语言、限制日期范围、添加相关按钮等导航。
之前做了一个排班考勤系统，更多的是和时间打交道，和时间控件做了一些对比。我觉得jqueryUI的这个datepicker比较实用。下面花点时间整理一下，供大家以后参考，希望能帮到你！
1、js和css的介绍
link rel= style sheet href= http://code . jquery . com/ui/1 . 10 . 4/themes/smooth/jquery-ui . CSS
script src= http://code . jquery . com/jquery-1 . 9 . 1 . js /script
script src= http://code . jquery . com/ui/1 . 10 . 4/jquery-ui . js /script
不用说，datepicker是基于jqueryUI的控件，使用jqueryUI必须先引入jquery.js。
2，配置属性
在我第一次接触这个插件之前，我也在网上找资料，但是大部分都是杂七杂八的。各种属性罗列的有条不紊，我也挑不出重点。实际上，我们一天用不了这么多。为了快速查看和使用它，我将在方法体中直接列出最常用的属性：
Input=测试日期选择器 class=测试日期选择器 placeholder=请选择一个日期./
脚本类型=文本/javascript
$(#testDatepicker )。日期选择器({
ShowAnim: slideDown ，//显示默认，slideDown，fadeIn，百叶窗快门，bounce反弹，Clip剪辑，下拉，折叠，幻灯片幻灯片。
ATE:-1，//最小日期可以是Date对象，也可以是数字(从今天开始，例如7)，还可以是有效字符串(“y”代表年，“m”代表月，“w”代表周，“d”代表日，例如，“1m 7d”)。
MaxDate: 17，//最大日期同上。
日期：4，//默认日期同上。
持续时间：快，//动画显示的时间可以是慢，正常，快，表示立即，数字表示毫秒。
FirstDay: 1，//设置一周的第一天。默认情况下，星期日为0，星期一为1，依此类推。
Next:下个月，//设置下个月链接的显示文本。鼠标放上去的时候。
PrevText:上月，//设置上月链接的显示文本。
ShowButtonPanel: true，///是否显示按钮面板。
Text: Today ，//设置今天按钮的文本内容。该按钮需要通过showButtonPanel参数的设置来显示。
GotoCurrent: false，///如果设置为true，当你点击当天的按钮时，它会移动到当前选择的日期而不是今天。
});
/脚本
3.常见事件
Datepicker提供相关事件，实际开发中最常用的无非这三个。在放映前打开放映，在关闭放映后，一旦关闭放映，onselect被选中。我们可以通过控制台打印相关参数来调试如何使用，这样可以加深对插件的理解：
$(#testDatepicker )。日期选择器({
On: function (datetext，inst){//选择事件。
console.log(onselect，dateText ，dateText)；
console.log(onselect，inst ，inst)；
},
Before:function(input){//在面板上显示日期控件之前
console.log(beforeShow，input ，input)；
},
Once: function (datetext，inst){//关闭日期面板时触发此事件(无论是否选择日期)
console.log(onClose，dateText ，dateText)；
console.log(onClose，inst ，inst)；
}
});
这里说一下onselect事件。通常，在我们的实际项目中有两个日期选择框，比如开始日期和结束日期。然后我们必须检查开始日期必须小于结束日期，我们可以通过onselect事件改变另一个日期框的最大/最小日期来控制输入，如图所示：
html:
class= ipt-日期选取器 type= text id= schduledatestart placeholder=班次开始日期.name=schduleDateStart
class= ipt-日期选取器 type= text id= schduledateend placeholder=计划结束日期.name=schduleDateEnd
js：
$(#schduleDateStart )。日期选择器({
onSelect:function(dateText，inst){
$(#schduleDateEnd )。datepicker(option ， minDate ，dateText)；
}
});
$(#schduleDateEnd )。日期选择器({
onSelect:function(dateText，inst){
$(#schduleDateStart )。datepicker(option ， maxDate ，dateText)；
}
});
注意：当我们绑定onselect事件时，如果这个文本框中原来的change事件会失效或被覆盖，我们要把原来的change事件后的操作码移到onselect事件的回调函数中。
4、本地化：
到目前为止，我们基本上可以在实际项目中使用这个控件。但遗憾的是，这个控件是外国人开发的，所以底层肯定是英文的，所以用户体验肯定不好，所以需要引入一个zh-CN.js来汉化控件。代码非常简单。当然，我们也可以根据自己的需要，像pervText和nextText一样进行相关的修改：
/* jQuery UI日期选择器插件的中文初始化。*/
jQuery(函数($){
$ . date picker . regional[ zh-CN ]={
CloseText:关闭，
prev text:“# x3c；上个月，
文本：“下个月# x3e”,
文本：“今天”，
MonthNames: [一月，二月，三月，四月，五月，六月，
七月、八月、九月、十月、十一月和十二月]，
monthnameshort:[一，二，三，四，五，六，
七，八，九，十，十一，十二]，
日名：[星期日，星期一，星期二，星期三，星期四，星期五，星期六]，
DayNamesShort: [星期日，星期一，星期二，星期三，星期四，星期五，星期六]，
DayNamesMin: [日，一，二，三，四，五，六]，
日期格式：“年-月-日”，第一天：1，
is RTL:false }；
$ . date picker . set defaults($ . date picker . regional[ zh-CN ])；
});
5，控件效果图：
以上是边肖介绍的jQueryUI中如何使用datepicker的详细说明。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！
