1. 定义DateBox
在Easy UI 中定义DateBox有两种方式，一种是在HTML标签中直接进行Class的命名，另一种是在JavaScript代码中进行DataBox的启用
1). <input type="text" name="starttime" />
2). $('startime').datebox()
2. 取值
首先让我们来看看DateBox生成的动态生成的HTML代码。
<input type="text" />
生成：
其实，在我们将文本框变成了DateBox之后，EasyUI为我们生成了上面的代码。真正的值被保存在隐藏域中。所以用$("txtDate").val()是取不到我们想要的值的。故，取值的话用的是EasyUI中的方法。
1).$("#txtDate").datebox("getValue");
2).在DateBox的OnSelect事件中，将值赋给txtDate,然后再取
![]()
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);
};