html5新增属性日期控件 datetime-local | date

发表于2014-09-18 09:31  |  次阅读  |  0条评论  |   作者:siru90

html5新增日期属性:datetime-local | date ,可以轻松实现日历控件,不需要使用复制的js或寻找日历组件了,目前只有Chrome支持

一、datetime-local :日期和时间控件,可以精确到分钟
<input type="datetime-local" id="date" />
显示效果:
其value值的形式如:2014-01-31T00:59

二、date :日期控件
<input type="date" id="day">
显示效果:

三、下面是一个简单的案例
html:
日期和时间:<input type="datetime-local" id="date" />
<input type="button" value="查看日期" onClick="viewDate()" />
 
<br/><br/>
日期:<input type="date" id="day">
<input type="button" value="查看日期" onClick="viewDay()" />

javascript:
 <script type="text/javascript">
String.prototype.replaceAll = function(substr, replacement) { /*字符串替换*/
return this.replace(new RegExp(substr, "gm"), replacement);
};
String.prototype.trim = function() { /*去除字符串左右的空格*/
return this.replace(/(^\s*)|(\s*$)/g, "");
};
var Util = {};
Util.isPositiveInt = function(str){/*是否是正整数*/
var reg = /^[0-9]*[1-9][0-9]*$/;
return reg.test(str);
};

function viewDate() {
var date = document.getElementById("date").value;
if ("" == date) { /*日期中的时分也必须选择*/
alert("您选择的日期有误,请重新选择");
return;
}
date = date.replaceAll("-", "").replaceAll(":", "").replaceAll("T", "").trim(); /*日期转换为整数*/
if (!Util.isPositiveInt(date)) {
alert("您选择的日期有误,请重新选择");
return;
}
alert(date);
}

function viewDay() {
var date = document.getElementById("day").value;
if ("" == date) {
alert("您选择的日期有误,请重新选择");
return;
}
date = date.replaceAll("-", "").trim(); /*日期转换为整数*/
if (!Util.isPositiveInt(date)) {
alert("您选择的日期有误,请重新选择");
return;
}
alert(date);
}
</script>

完整代码下载

另外,这是由js组件jCal实现的日历控件,点此查看
本站关键字:sunny90 web开发 数据库 移动开发 服务器 Nginx Mysql PHP
Copyright © sunny90版权所有 power by sunny90.com  
湘ICP备14012284号-1,粤公网安备 44030602000307号