Jquery如期控件功能:
1.选择日期不能超过当天:
From
<input type="text" id="txtDateFrom" style="width: 70px;" class="textbox datetime required" />//datetime定义当前日期后的日期不能选择 To <input type="text" id="txtDateTo" style="width: 70px;" class="textbox datetime required" />//required定义必填项
2.选择时间的相互约束(To时间不能早于From时间,From时间不能大于To时间):
From
<input type="text" id="txtDateFrom" class="textbox datepicker" />//datepicker定义了样式以及输入文本框默认格式 To <input type="text" id="txtDateTo" class="textbox datepicker" />
//此方式与样式datepicker会产生冲突
$(function () { $("#txtDateFrom").datepicker({ dateFormat: DATE_FORMAT, numberOfMonths: 1, onSelect: function (selectedDate) { $("#txtDateTo").datepicker("option", "minDate", selectedDate); } }); $("#txtDateTo").datepicker({ dateFormat: DATE_FORMAT, numberOfMonths: 1, onSelect: function (selectedDate) { $("#txtDateFrom").datepicker("option", "maxDate", selectedDate); } }); })
如果冲突需要重新定义datepicker验证,绑定onSelect如下:
$(".datepicker").datepicker({ changeMonth: true, changeYear: true, dateFormat: DATE_FORMAT, onSelect: function (selectedDate) { var _this = $(this); var attr = _this.attr("dateminto"); if (attr) { $("#" + attr + "").datepicker("option", "minDate", selectedDate); } else{ $("#" + _this.attr("datemaxto") + "").datepicker("option", "maxDate", selectedDate); } } }).focus(function () { $(this).removeClass("error"); }).blur(function () { if (this.value != "" && !checkDate(this.value)) { $.jAlert("Please enter a valid date."); $(this).addClass("error"); } }).keyup(function () { var val = this.value; try { if (val.length == 2) { this.value = val + "/" } else if (val.length == 5) { this.value = val + "/" } } catch (e) { } });
3.文本框优化:
包含:a)界面优化; b)输入框默认格式化;
==》
From
<input type="text" id="txtDateFrom" class="textbox datepicker" />//datepicker定义了样式以及输入文本框默认格式 To <input type="text" id="txtDateTo" class="textbox datepicker" />
以datepicker为例,添加相应操作:
1.在文件Jquery.common.js中相应位置添加代码:
//Date Picker $(".datepicker").datepicker({ changeMonth: true, //设置月是否下拉框选择 changeYear: true, //设置年是否下拉框选择 dateFormat: DATE_FORMAT }).focus(function () { $(this).removeClass("error"); }).blur(function () { if (this.value != "" && !checkDate(this.value)) { $.jAlert("Please enter a valid date."); $(this).addClass("error"); } }).keyup(function () { var val = this.value; try { if (val.length == 2) { this.value = val + "/" } else if (val.length == 5) { this.value = val + "/" } } catch (e) { } });
推荐参考:http://www.jqueryui.com/datepicker/