HTML Jquery EasyUI日期选择框的使用详解
1、源码如下：
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="js/easyui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
开始日期：<input class="easyui-datebox" name="begindate" id="begindate"
data-options="formatter:myformatter,parser:myparser"></input>
结束日期：<input class="easyui-datebox" name="enddate" id="enddate"
data-options="formatter:myformatter,parser:myparser"></input>
<script type="text/javascript">
function myformatter(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);
}
function myparser(s) {
if (!s)
return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0], 10);
var m = parseInt(ss[1], 10);
var d = parseInt(ss[2], 10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
return new Date(y, m - 1, d);
} else {
return new Date();
}
}
</script>
</body>
</html>
2、先在html的head部分引入需要的EasyUI样式包和js包
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="js/easyui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
3、插入input元素，默认input日期格式是2/6/2014，必须加入以下js处理后的日期格式才是通用2014-02-14这种格式。
html body内容如下：
开始日期：<input class="easyui-datebox" name="begindate" id="begindate"
data-options="formatter:myformatter,parser:myparser"></input>
结束日期：<input class="easyui-datebox" name="enddate" id="enddate"
data-options="formatter:myformatter,parser:myparser"></input>
<script type="text/javascript">
function myformatter(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);
}
function myparser(s) {
if (!s)
return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0], 10);
var m = parseInt(ss[1], 10);
var d = parseInt(ss[2], 10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
return new Date(y, m - 1, d);
} else {
return new Date();
}
}
</script>
4、js获取和设置EasyUI日期格式框的日期如下：
获取日期值：
function getDate(){
var begindate=$('#begindate').datebox('getValue'); //注意.datebox('getValue')是EasyUI固定的写法。
}
设置日期值：
function setDate(){
$("#begindate").datebox('setValue','<%=begindate%>');
$("#enddate").datebox('setValue','<%=enddate%>');
}
//setValue是EasyUI固定的写法。