jquery easyui 時間控件的使用

一、日期控件datebox

原文鏈接：

http://blog.csdn.net/walkerjong/article/details/7530709

http://www.cnblogs.com/yechun/archive/2012/03/18/2404381.html

基本用法：

1） 加入日期選擇框

$("#dd").datebox({"required":true}); 

2） javascript獲取日期選擇框的值

$("#dd").datebox("getValue");  或者$("input[name='dd']").val();

那么我們可以給它添加一個事件監聽，在datebox onSelect 日期選中后，自動為input id="dd" type="text"賦值，然后我們就可以使用

$("#dd").val()獲取選中的日期值了。

    <script type="text/javascript">  
    $(document).ready(function(){  
        $("#dd").datebox({  
            required:true,  
            onSelect: function(date){  
                $("#dd").val(date);  
            }  
        });  
    });  
    </script>  

3） javascript設置datebox的值

$("#dd").datebox("setValue", "2012-01-01");

 例：添加編輯頁面

    @Html.Hidden("hBirthDate", Model.BirthDate.ToString("yyyy-MM-dd"))

 $(document).ready(function () {

        $("#BirthDate").datebox({
            required: false,
            formatter: function (date) { return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(); },
            parser: function (date) { return new Date(Date.parse(date.replace(/-/g, "/"))); },
            onSelect: function (date) {
                $("#BirthDate").val(date);
            }
        });
        //處理日期格式問題
        if ($("#hBirthDate").val() != "" && $("#hBirthDate").val() != "0001-01-01") {
            $("#BirthDate").datebox("setValue", $("#hBirthDate").val());
        } else {
            $("#BirthDate").datebox("setValue", ((new Date()).getFullYear() - 25) + "-01-01");
        }
});

二、時間控件datetimebox

 用法和日期控件類似

實現開始日期和結束日期的判斷和賦值

綁定腳本：

 <script type="text/javascript">  
    $(document).ready(function(){  
         $("#StartDT").datetimebox({
            required: false,
            formatter: function (date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                var hh = date.getHours();
                var mm = date.getMinutes();
                var ss = date.getSeconds();
                return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + ' ' + (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + (ss < 10 ? ('0' + ss) : ss);
            },
            parser: function (date) { return new Date(Date.parse(date.replace(/-/g, "/"))); },
            onSelect: function (date) { 
                $("#StartDT").val(date);
                var startDate = date;
                var endDate = $('#EndDT').val();
                if ((new Date(startDate)).dateDiff(endDate) > 0) {
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    var d = date.getDate();
                    var hh = date.getHours();
                    var mm = date.getMinutes();
                    var ss = date.getSeconds();
                    var dateStr =  y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + ' ' + (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + (ss < 10 ? ('0' + ss) : ss);
                    $("#EndDT").datetimebox('setValue', dateStr);
                }
            }
        });
        $("#EndDT").datetimebox({
            required: false,
            formatter: function (date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                var hh = date.getHours();
                var mm = date.getMinutes();
                var ss = date.getSeconds();
                return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + ' ' + (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + (ss < 10 ? ('0' + ss) : ss);
            },
            parser: function (date) { return new Date(Date.parse(date.replace(/-/g, "/"))); },
            onSelect: function (date) { 
                $("#EndDT").val(date);
                var startDate = $("#StartDT").val();
                var endDate = date; 
                if ((new Date(startDate)).dateDiff(endDate) > 0) {
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    var d = date.getDate();
                    var hh = date.getHours();
                    var mm = date.getMinutes();
                    var ss = date.getSeconds();
                    var dateStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d) + ' ' + (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + (ss < 10 ? ('0' + ss) : ss);
                    $("#StartDT").datetimebox('setValue', dateStr);
                }
            }
        });
        //時間賦值
        if ($("#ModelStartDT").val() != "") {
            $("#StartDT").datetimebox("setValue", $("#ModelStartDT").val());
        }
        if ($("#ModelEndDT").val() != "") {
            $("#EndDT").datetimebox("setValue", $("#ModelEndDT").val());
        }

    });  
    </script>  

使用的自定義方法dateDiff

可參考http://www.cnblogs.com/xcsn/p/5194822.html

相關的時間驗證

jQuery.validator.addMethod("nowtime", function (value, element) {
    if (this.optional(element)) return true;
    var assigntime = value;
    var deadlinetime = new Date();
    var reg = new RegExp('-', 'g');
    assigntime = assigntime.replace(reg, '/');//正則替換 
    assigntime = new Date(parseInt(Date.parse(assigntime), 10));
    deadlinetime = new Date(parseInt(Date.parse(deadlinetime), 10));
    if (assigntime < deadlinetime) {
        return false;
    } else {
        return true;
    }
}, "不能小於當前時間！");
 
$.validator.addMethod("mintime", function (value, element, para) {
    if (this.optional(element)) return true;
    var assigntime = value;
    var deadlinetime = para;
    var reg = new RegExp('-', 'g');
    assigntime = assigntime.replace(reg, '/');//正則替換
    deadlinetime = deadlinetime.replace(reg, '/');
    assigntime = new Date(parseInt(Date.parse(assigntime), 10));
    deadlinetime = new Date(parseInt(Date.parse(deadlinetime), 10));
    if (assigntime < deadlinetime) {
        return false;
    } else {
        return true;
    }
}, "結束時間必須大於開始時間");
$.validator.addMethod("maxtime", function (value, element, para) {
    if (this.optional(element)) return true;
    var assigntime = value;
    var deadlinetime = para;
    var reg = new RegExp('-', 'g');
    assigntime = assigntime.replace(reg, '/');//正則替換
    deadlinetime = deadlinetime.replace(reg, '/');
    assigntime = new Date(parseInt(Date.parse(assigntime), 10));
    deadlinetime = new Date(parseInt(Date.parse(deadlinetime), 10));
    if (assigntime > deadlinetime) {
        return false;
    } else {
        return true;
    }
}, "開始時間必須小於結束時間");