电光石火-穿越时空电光石火-穿越时空


EasyUI日期选择框

09fa513d269759ee5d538497b0fb43166d22df6f.jpg  

<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>

 95eef01f3a292df524a54849be315c6034a8730c.jpg 先在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固定的写法。

 

本博客所有文章如无特别注明均为原创。作者:似水的流年
版权所有:《电光石火-穿越时空》 => EasyUI日期选择框
本文地址:http://ilkhome.cn/index.php/archives/89/
欢迎转载!复制或转载请以超链接形式注明,文章为 似水的流年 原创,并注明原文地址 EasyUI日期选择框,谢谢。

评论