HTML5 Data Input 元素介绍

05-09 次

标签 html5 data input

我们在网页中经常要使用到日期时间选择器。通常这些效果都是由一些jQuery插件来完成，但是HTML5为我们提供了一个元素的data输入框。这个data元素可以完成日期的输入，并且它的浏览器兼容性非常好，很可惜的是Firefox和Safari浏览器目前还不支持这个元素。

data输入框的基本HTML结构可以像下面这样：

<label for="bookdate">出版日期：</label>
<input type="date" id="bookdate" placeholder="2015-05-09">

在你的浏览器中，可以得到下面的结果：

出版日期：

data输入框的外观和语言取决于浏览器。可以使用value属性为它设置一个默认值。在不支持data元素的浏览器中，会将它简单的渲染为一个普通的输入框，添加一个placeholder属性，可以在不支持的浏览器中直接显示出这个日期。

DATA元素的日期范围

一般一个日期选择器会允许用户选择某个时间范围的日期。data输入框元素默认允许选择完整的日期范围。我们可以通过max和min属性来限制某个时间范围。

<input type="date" id="bookdate" value="2015-05-09" min="2014-05-09" max="2015-05-18">

得到的结果如下：

data输入框中的值可以通过PHP或javascript来动态改变。

使用PHP来限制日期选择范围

我们可以在value、min和max属性中使用PHP代码来调用日期，这样所有的日期都会动态更新。

<input type="date" id="bookdate" min="<?=date('Y-m-d')>" value="<?=date('Y-m-d')>" max="<?=date('Y-m-d', strtotime("+7 day", time()))>" value="<?=date('Y-m-d')>" >

上面的代码将设置max属性为比当前日期多7天。

使用JAVASCRIPT来限制日期选择范围

我们也可以使用javascript来做同样的事情：

<script>
  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);
</script>

使用step属性限制日期选择范围

我们HIA可以通过step属性来限制时间范围。step属性设置为2的话，日期只能在两天内来回选择。step属性设置为7，可以在一个星期的时间范围内进行选择。

使用Datalist来限制日期选择范围

你还可以通过<datalist>元素来限制某个有效的时间范围。在<datalist>元素中，每一个<option>都关联一个可用的日期。下面的代码中，<label>元素是可选的，它用于一些提示信息：

<label for="vacations">法定节假日</label>
<input type="date" list="vacation-days" id="vacations">
<datalist id="vacation-days">
  <option label="元旦节">2015-01-01</option>
  <option label="五一劳动节">2015-05-01</option>
  <option label="国庆节">2015-10-01</option>
  <option label="春节">2016-02-08</option>
</datalist>

得到的结果如下：

法定节假日

自定义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或其它的一些框架。