EasyUI日期选择框

时间:2022-04-22
本文章向大家介绍EasyUI日期选择框,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<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>
&nbsp;
结束日期:<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>
 &nbsp;

结束日期:

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