当前位置主页 > 资料库 > 前端教程 > HTML5 Data Input 元素介绍

HTML5 Data Input 元素介绍

2015-05-09

我们在网页中经常要使用到日期时间选择器。通常这些效果都是由一些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输入框元素默认允许选择完整的日期范围。我们可以通过maxmin属性来限制某个时间范围。

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

得到的结果如下:

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

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

我们可以在valueminmax属性中使用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或其它的一些框架。

小结

HTML5还有一些和data相关的元素,如monthweekdatetime-local等。data实际上就是一个日期选择器组件,通过data元素,我们可以设置某个范围的日期让用户可以进行选择。希望以上内容对你有所帮助!

Previous:
上一篇:【恒创科技】5月主机促销(1年1次),主机优惠25%,免费抽奖
Next:
下一篇:你必须使用的8个Sass mixins

我要评论

返回顶部