Jquery 日期控件优化

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/