html时间选择控件 简书,input标签的日历功能实现

1. 利用HTML5 input标签属性type="date"

以上代码在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

Paste_Image.png

页面：

layDate Demo

;!function(){

laydate({

elem: '#demo'

})

}();

效果：

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 过山过水