<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>
先在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>
插入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>js获取和设置EasyUI日期格式框的日期如下: 获取日期值: function getDate(){ var begindate=$('#begindate').datebox('getValue'); //注意.datebox('getValue')是EasyUI固定的写法。 } 设置日期值: function setDate(){ $("#begindate").datebox('setValue','<%=begindate%>'); $("#enddate").datebox('setValue','<%=enddate%>'); } //setValue是EasyUI固定的写法。