html5 input step,HTML5 Data Input 元素介绍

我们在网页中经常要使用到日期时间选择器。通常这些效果都是由一些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元素，我们可以设置某个范围的日期让用户可以进行选择。希望以上内容对你有所帮助！