EasyUI DateBox

1. 定义DateBox

      在Easy UI 中定义DateBox有两种方式，一种是在HTML标签中直接进行Class的命名，另一种是在JavaScript代码中进行DataBox的启用

 1). <input type="text" name="starttime" id="starttime" class="easyui-datebox"/>
 2). $('startime').datebox()

2. 取值

  首先让我们来看看DateBox生成的动态生成的HTML代码。

<input type="text" id="txtDate" class="easyui-datebox"/>

生成：

       其实，在我们将文本框变成了DateBox之后，EasyUI为我们生成了上面的代码。真正的值被保存在隐藏域中。所以用$("txtDate").val()是取不到我们想要的值的。故，取值的话用的是EasyUI中的方法。

1).$("#txtDate").datebox("getValue");

2).在DateBox的OnSelect事件中，将值赋给txtDate,然后再取

$("#txtDate").datebox({
    required: true,
    onSelect: function (date) {
        $("#txtDate").val(date);
    }
});

 

3.赋值

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

4.日期格式验证

       --需要注意的是，DateBox已经集成了验证的功能，不用再使用ValiDateBox了。

首先先扩展其验证的方法：

$.extend($.fn.datebox.defaults.rules, {
    date: {
        validator: function (value) {
            //格式yyyy-MM-dd或yyyy-M-d
            return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value);
        },
        message: '请输入正确的日期格式'
    }
})

验证调用：

$(function () {
    $("#txtDate").datebox({
        required: true,//必须
        validType: 'date'
    });
});

5. 日期格式化

在DateBox中，和日期格式化有关的特性有formatter和parser

• formatter：格式化日期的函数，此函数有一个 'date' 参数，其实Date类型的，并返回一个字符串值。也就是说我们选择日期后显示在文本框中的日期格式可以用formatter重写
• parser：解析日期字符串的函数，此函数有一个 'date' 字符串参数，并返回一个日期值。

$("#txtDate").datebox({
    formatter: function (date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
    }
});

也可以重写DateBox的日期格式：

$.fn.datebox.defaults.formatter = function (date) {
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    var d = date.getDate();
    return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
};