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固定的写法。