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的详细说明。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。