最近项目用了日期控制，感觉不错。写出来和大家分享。我限制开始时间和结束时间跨度不超过三天，并配置了清除时间和重新选择时间的功能。分享给大家：首先给大家看两个效果图。

在示例中，我控制的开始时间和结束时间是三天，即开始时间和结束时间之间的跨度不能超过三天。

代码中详细解释了它是如何实现的。请继续往下看：

第一步是介绍控件js，这里有两个，一个是jquery.js，另一个是jquery-ui-datepicker.js，当然还有样式文件介绍：

脚本类型=' text/JavaScript ' src=' http : js/jquery . js '/脚本脚本类型=' text/JavaScript ' src=' http : js/jquery-ui-datepicker . js '/脚本rel='样式表'类型=' text/CSS ' href=' CSS/jquery-ui . CSS '/第二步：创建一个文本输入框，输入文本类型，在我的演示中写下清空时间的设置，也就是

TD=' 35% '标签开始时间：/label输入类型=' text ' name=' start ' id=' start ' value=' $ { params。start}' readonly=' true' title='日期范围不能大于3天'/Input type=' button ' class=' form button ' value=' clear ' onclick=' cleanevenput(this)；'/font color='red '必选*/font /td td width='35% '标签结束时间：/标签输入类型=' text ' name=' end ' id=' end ' value=' $ { params . end }。Readonly='true' title='日期范围不能超过3天'/input type=' button ' class=' form button ' value=' clear ' onclick=' cleanevenput(this)；/font color='red '必选*/font /td，不用担心里面的数值。我是项目中编写的代码。写入该值是为了在查询后刷新页面时，在时间范围内仍然可以有一个选定的时间值。

下面的代码用于调用日期控件。代码如下：

$(function(){ //获取调用控件的对象var date=$(' # start，# end ')；var期权；//设置目标时间，因为示例中的开始时间和结束时间都是带时间限制的var targetDatevar optionEndvar targetDateEnddate . dateppicker({ showbuttonpanel : false，//选择时间时会触发此事件。在选择：功能(选定日期)时。id==' start '){//如果选择了开始时间选项=' minDate//getTimeByDateStr下面会贴这个方法的代码，也就是处理时间var selected time=getTimeByDateStr(selected date)的代码；var minTime=selectedTimetargetDate=新日期(分钟)；//设置结束时间optionEnd=' maxDatetargetDateEnd=新日期(minTime 2 * 24 * 60 * 60 * 1000)；}else{ //如果选择了结束时间选项=' maxDatevar selected time=getTimeByDateStr(selected date)；var maxTime=selectedTimetargetDate=新日期(最大时间)；//设置开始时间选项=' minDatetargetDateEnd=新日期(maxTime-2 * 24 * 60 * 60 * 1000)；}//设置时间范围内的时间。例如，根据选择的开始时间，它不是限制结束时间的选项。js选择器使用了dates.not(这一点)。//datepicker ('option '，option，targetdate)，它是由日期控件封装的api。不是(这个)。datepicker('option '、optionEnd、targetdate end)；} });});首先在上面的代码中张贴getTimeByDateStr(XXX)方法的代码，方便大家查看。这段代码非常简单，相信大家一目了然：

//获取时间函数gettimebydatestr(datestr){ var year=par sent(datestr。根据日期字符串的子字符串(0，4))；var month=parseInt(DateStr . substring(5，7)，10)-1；var day=parseInt(DateStr . substring(8，10)，10)；返回新日期(年、月、日)。getTime()；}代码现在可以使用日期控件，开始时间和结束时间限制在三天以内。例如，如果您将开始时间选择为2014年3月27日，则结束时间只能选择在27日、28日和29日，其余日期不能单击。如果选择结束时间为28，那么现在开始时间只能选择28、27、26，如此而已。

第三步：看空按钮，它是空时间选择框中的值。这很容易实现：

//清空日历控件函数cleanevenput(objs){//清空输入框中的值，但只清空值，时间控件的选择限制仍然是$(objs)。prev()。val(“”)；//如果开始时间和结束时间都为空，那么您选择的框中应该没有时间限制，也就是说您可以选择日期if ($ ('# start ')。val ()=='' $ ('# end ')。val()==' '){ var date=$(' # start，)。//调用datepicker封装的api，使刚设置的开始时间和结束时间为空，这样就可以选择任意日期。DatePicker ('option '，' mindate '，null)；date . date picker(' option '，' maxDate '，null)；}}现在可以使用了。如果只使用控件，则非常简单，无需设置时间限制。上面的代码可以用于大多数日期选择需求，但是如果有什么特殊的地方，你需要自己检查api。当时为了清空date控件中的值，我只检查了api半天，也就是这段代码：date。datepicker ('option '，' maxdate '，null)。

以上是jquery UI Datepicker时间控件所有内容的介绍，暂时已经全面停止。以后会有相关文章，第一时间分享给大家。