在jQueryUI中使用datepicker的详细说明

JQuery UI非常强大，Datepicker插件是一个配置灵活的插件。我们可以自定义其显示模式，包括日期格式、语言、限制日期范围、添加相关按钮等导航等。

之前做的一个排班考勤系统，更多的是处理时间，并和时间控制做了一些比较。我认为jqueryUI中的这个日期选择器更实用。大家花点时间整理一下，方便以后参考，希望对大家有所帮助！

1、介绍js、css。

link rel='样式表' href=' http://code . jquery.com/ui/1 . 10 . 4/themes/smooth/jquery-ui . CSS ' script src=' http :http://code . jquery.com/不用说jquery-1 . 9 . 1 . js '/script script src=' http:3358code.jquery.com/ui/1.10.4/jquery-ui.js'/script是一个基于jquery yui的控件，在使用jquery yui之前必须引入jquery.js。

2.配置属性。

在我第一次接触这个插件之前，我也在网上搜索过各种资料，但是大部分都比较杂，各种属性罗列得有条不紊，分不清重点。实际上，我们日常使用不需要那么多。为了快速查看和使用，我将在这里直接列出方法体中最常用的属性：

输入id=“测试日期选择器”类=“测试日期选择器”占位符=“请选择一个日期.”/script type=' text/JavaScript ' $(' # test date picker ')。dateppicker({ show anim : ' slideDown '，//show default，slide down，fadeIn，blind shutter，bounce，Clip，drop down，fold fold，slide slide mindate 3360-1，//最小日期，它可以是date对象，数字(从今天开始，例如7)，或有效字符串(' y '代表年，' m '代表月，' w '代表周，' d '代表日，例如' 1m 7d ')。MaxDate: 17，//max date，与defaultDate : 4相同，//default date，与duration 3360' fast '相同，//动画显示时间，可以是'慢速'，'正常'，'快速'，'代表立即，数字代表毫秒firstDay : 1，////。默认情况下，星期日为0，星期一为1，依此类推。Text: '下个月'，//设置“下个月”链接的显示文本。鼠标放上去时的PrevText : '上个月'。//设置“上个月”链接的显示文本。ShowButtonPanel :为真。//是否显示按钮面板当前文本：“今天”？//设置当天按钮的文字内容。该按钮只能通过设置Showbuttonpanel的参数来显示。Gotocurrent: false。//如果设置为true，当您单击“今天”按钮时，它将移动到当前选定的日期，而不是今天。});/script3，常见事件。

Datepicker提供了相关的事件，但这三个是实际开发中最常用的事件。打开前的beforeShow，关闭后的onClose和onselect，我们可以通过控制台打印相关参数来调试如何使用，从而加深对插件的理解。

$ ('# test datepicker ')。dateppicker({ on select :函数(datetext，inst){//选择事件控制台. log ('on select，datetext '，datetext)；console.log('onselect，inst '，inst)；}、前显：功能(输入){//console.log('前显，输入'，输入)前的日期控制显示面板；}，onclose :函数(datetext，inst){//此事件在日期面板关闭后触发(无论是否选择了日期)console.log ('onclose，datetext '，date text)；console.log('onClose，inst '，inst)；}});让我们在这里讨论onselect事件。通常，在我们的实际项目中有两个日期选择框，如开始日期和结束日期。然后我们必须验证开始日期必须小于结束日期，并且我们可以通过onselect事件更改另一个日期框的最大/最小日期来控制输入，如图所示：

html:

input class=' ipt-date picker ' type=' text ' id=' schduledatestart '占位符='计划开始日期.'name=' schduledatest ' input class=' ipt-date picker ' type=' text ' I . D=' schduledatend ' placeholder='计划结束日期.'name=' schduleDateEnd 'js:

$('#schduleDateStart ')。date picker({ onselect: FuncTion(DateText，inst){ $(' # Schduledatend ')。datepicker('option '，' minDate '，date text)；}});$(' # schduledatend ')。dateppicker({ onselect: function(date text，inst){$('#schduleDateStart ')。datepicker('option '，' maxDate '，DateText)；}});注意：当我们绑定on sele事件时，该文本框中的原始变更事件将无效或被覆盖，因此我们需要将原始变更事件后的操作代码移动到on sele事件的回调函数中。

4.本地化：

到目前为止，我们基本上可以在实际项目中使用这种控制。可惜这个控件是外国人开发的，所以底层必须是英文，所以用户体验肯定不好，所以需要引入一个zh-CN.js来让控件中文化。代码很简单，当然像pervText和nextText，我们也可以根据自己的需要进行相关的修改：

/* jquery ui日期选择器插件的中文初始化。*/jquery(函数($) {$)。日期选择器。regional[' zh-cn ']={ closetext 3360 ' close '，PrevText: '上月'，nextText: '下月'，currentText: '今日'，monthNames: ['一月'，'二月'，'三月'，'四月'，'五月'，'六月'，'七月'，'。MonthNamesShort: ['一'，'二'，'三'，'四'，'五'，'六'，'七'，'八'，'九'，'十'，'十一'，'十二']，DayNames 3360 ['星期日'。daynameshort :['星期日'，'星期一'，'星期二'，'星期三'，'星期四'，'星期五'，'星期六']，Daynamesmin3360 ['星期日'，'一'，'二'，'三'，'四'，'五'。$ . datepicker . setdefaults($ . datepicker . regional[' zh-CN '])；});5.控制渲染：

以上是边肖介绍的jQueryUI中如何使用datepicker的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！