input标签的日历功能实现
2016-09-14 本文已影响359人
过山过水
1. 利用HTML5 input标签属性type="date"
<input id="date" type="date" name="birthday" value="" placeholder="请填写您的出生日期" />
以上代码在PC端的样式为
Paste_Image.png
在iPhone6s手机端的样式为
Paste_Image.png
默认的placeholder样式为：2016/09/14
注：
*PC端支持min和max日期限制(手机端不支持该特性)，如想要限制年龄为22-49周岁，js如下：
//保证年龄是22-49岁之间
var currYear = (new Date()).getFullYear();
var startYear = currYear - 49; //开始年份
var endYear = currYear - 22; //结束年份
var start=startYear+'-01-01';
var end=endYear+'-12-31';
$("input[name='birthday']").attr('min',start).attr('max',end);
*placeholder的CSS处理
input[type="date"] {
-webkit-appearance: none; /*清除样式*/
background-color: transparent; /*清除背景色*/
}
input[type="date"]:before{
content: attr(placeholder);
color:#8f8f8f;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #8f8f8f;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #8f8f8f;
}
input:-ms-input-placeholder {
color: #8f8f8f;
}
input::-webkit-input-placeholder {
color: #8f8f8f;
}
/*设置calendar的样式*/
::-webkit-datetime-edit-fields-wrapper { background-color: white; }
::-webkit-datetime-edit-text { color: #8f8f8f;}
::-webkit-datetime-edit-year-field { color: #8f8f8f; }
::-webkit-datetime-edit-month-field { color: #8f8f8f; }
::-webkit-datetime-edit-day-field { color: #8f8f8f; }
*最后还需要保证input值为空的时候placeholder自动出现，js如下
//date日期的placeholder处理
var o = document.getElementById('date');
o.onfocus = function(){
this.removeAttribute('placeholder');
};
o.onblur = function(){
if(this.value == '') this.setAttribute('placeholder','请填写您的出生日期');
};
2. 使用插件laydate.js
官网：http://laydate.layui.com/
插件目录：
Paste_Image.png
页面：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>layDate Demo</title>
<script src="laydate/laydate.js"></script>
</head>
<body>
<input class="laydate-icon" id="demo" value="">
</body>
<script>
;!function(){
laydate({
elem: '#demo'
})
}();
</script>
</html>
效果：
Paste_Image.png
使用插件可以达到设置min和max日期的效果，如：
//日历插件参数配置
;!function(){
//保证年龄是22-49岁之间
var currYear = (new Date()).getFullYear();
var startYear = currYear - 49; //开始年份
var endYear = currYear - 22; //结束年份
var start=startYear+'-01-01';
var end=endYear+'-12-31';
//日期范围限制
var start = {
elem: '#date',
format: 'YYYY-MM-DD',
min: start, //设定最小日期为当前日期
max: end, //最大日期
};
laydate(start);
}();
3. 使用插件laydate.js
Edit by 过山过水
