我们在网页中经常要使用到日期时间选择器。通常这些效果都是由一些jQuery插件来完成，但是HTML5为我们提供了一个元素的data输入框。这个data元素可以完成日期的输入，并且它的浏览器兼容性非常好，很可惜的是Firefox和Safari浏览器目前还不支持这个元素。
data输入框的基本HTML结构可以像下面这样：
出版日期：
在你的浏览器中，可以得到下面的结果：
出版日期：
data输入框的外观和语言取决于浏览器。可以使用value属性为它设置一个默认值。在不支持data元素的浏览器中，会将它简单的渲染为一个普通的输入框，添加一个placeholder属性，可以在不支持的浏览器中直接显示出这个日期。
DATA元素的日期范围
一般一个日期选择器会允许用户选择某个时间范围的日期。data输入框元素默认允许选择完整的日期范围。我们可以通过max和min属性来限制某个时间范围。
得到的结果如下：
data输入框中的值可以通过PHP或javascript来动态改变。
使用PHP来限制日期选择范围
我们可以在value、min和max属性中使用PHP代码来调用日期，这样所有的日期都会动态更新。
" value="=date('Y-m-d')>" >
上面的代码将设置max属性为比当前日期多7天。
使用JAVASCRIPT来限制日期选择范围
我们也可以使用javascript来做同样的事情：
function convertToISO(timebit) {
timebit.setHours(0, -timebit.getTimezoneOffset(), 0, 0);
// remove GMT offset
var isodate = timebit.toISOString().slice(0,10);
// format convert and take first 10 characters of result
return isodate;
}
var bookdate = document.getElementById('bookdate');
var currentdate = new Date();
bookdate.min = convertToISO(currentdate);
bookdate.placeholder = bookdate.min;
var futuredate = new Date();
futuredate.setDate(futuredate.getDate() + 7);
// go forward 7 days into the future
bookdate.max = convertToISO(futuredate);使用step属性限制日期选择范围
我们HIA可以通过step属性来限制时间范围。step属性设置为2的话，日期只能在两天内来回选择。step属性设置为7，可以在一个星期的时间范围内进行选择。
使用Datalist来限制日期选择范围
你还可以通过元素来限制某个有效的时间范围。在元素中，每一个都关联一个可用的日期。下面的代码中，元素是可选的，它用于一些提示信息：
法定节假日
2015-01-01
2015-05-01
2015-10-01
2016-02-08
得到的结果如下：
法定节假日
2015-01-01
2015-05-01
2015-10-01
2016-02-08
自定义Data的样式
我们在自定义data元素的样式的时候有很多局限性。和HTML5 color元素一样，data元素的UI外观样式取决于底层的操作系统和浏览器。在IOS8系统中的data元素组件的样式和桌面浏览器中的样式是完全不同的。
Chrome浏览器允许我们使用Shadow DOM伪元素来修改data元素的外观。
input[type=date] { border: none; width: 18rem; background: black; color: #fff; padding: 1rem; font-size: 1.4rem; }
::-webkit-datetime-edit { font-size: 1.4rem; }
::-webkit-datetime-edit-fields-wrapper { padding: 1rem; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.5em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field[aria-valuetext=blank] { color: white; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-clear-button {
display: none; -webkit-appearance: none;
}
::-webkit-calendar-picker-indicator {
background: none; color: red;
font-size: 2rem; margin-right: 1rem; transition: .4s;
}
::-webkit-calendar-picker-indicator:hover { color: yellow; }得到的结果如下：
上面的代码纤维所有的浏览器指定data元素的统一样式，在为Webkit内核的浏览器指定特别的样式。
如果你需要能完全控制日期选择器的外观和行为，建议你使用jQueryUI或其它的一些框架。
小结
HTML5还有一些和data相关的元素，如month、week和datetime-local等。data实际上就是一个日期选择器组件，通过data元素，我们可以设置某个范围的日期让用户可以进行选择。希望以上内容对你有所帮助！
