HTMLinput⽇期输⼊类型
在很多页⾯和web应⽤中都有输⼊⽇期和时间的地⽅，最典型的是订飞机票，⽕车票，酒店，批萨等⽹站。
在HTML5之前，对于这样的页⾯需求，最常见的⽅案是⽤Javascript⽇期选择组件。这⼏乎是⽆可争议、别⽆选择的做法。你可以在搜寻⼀下“javascript ⽇期选择框”，会发现有⽆数的可选择的JavaScript组件。⼤部分这些⽇期选择组件都提供将⽇期填充到指定的输⼊框⾥的功能。
HTML5⾥的date input类型给了给了浏览器实现原⽣⽇历的机会，从此之后，JavaScript版的⽇历组件将退出历史舞台。
HTML5规范⾥只规定date，并没有规定⽇历弹出框的实现和样式。所以，各浏览器根据⾃⼰的设计实现⽇历。
⽬前只有⾕歌浏览器完全实现⽇历功能。相信这种局⾯很快就会结束，所有的浏览器最终都将会提供原⽣的⽇历组件。
如果你使⽤的是⾕歌浏览器，那你就可以在下⾯的实例演⽰中看到这个漂亮的⽇期组件。⽤⿏标点击输⼊框，就能看到浏览器原⽣的⽇历框。
如果你当前使⽤的浏览器还没有实现⽇历组件，下⾯的图⽚你可以先睹为快。
⽆需任何的JavaScript，它变成了⼀个最基本的 <input type=”date”/>
<label for="meeting">约会⽇期：</label><input id="meeting" type="date" value="2014-01-13"/>
HTML5让Web程序员的⼯作变得异常简单，不是吗？不仅如此，我们得到的不仅仅只有⼀个“⽇期”类型的input，还有⼀系列相关的⽇期、时间参数让我们⾃定义。我们虽然称之为“⽇期”类型，但这⾥的type实际上是可以为“date”、“week”、“month”、“time”、“datetime”和“datetime-local”。下⾯我将⽤实例加图⽂的⽅式向⼤家演⽰各种type的外观表现。
需要提醒的是，下⾯的截图都是在⾕歌浏览器中效果，其它浏览器中显⽰的样⼦会稍有不同，但功能会是⼀样的。
1. ⽇期(<input type=”date”/>)
这是最基本的⽇期选择器，你只能从⽇历中选择某个⽇期。
请选择⽇期：
截图：
2. 周(<input type=”week”/>)
这时，你选择的就不是⼀个⽇期了，⽽是周。请注意周数显⽰的⽅式。
请选择周：
截图：
3. ⽉份(<input type=”month”/>)
这时你选择的是⽉份，跟“date”类型⽐起来少了后⾯的⽇⼦数。
请选择⽉：
截图：
4. 时间(<input type=”time”/>)
这是最简单的⼀种显⽰，没有⽇历，只能选择时间。
请选择时间：html input type属性
截图：
5. ⽇期+时间(<input type=”datetime”/>)
既显⽰⽇期组件，⼜显⽰时间组件，其实就是“date”类型和“time”类型的组合。
请选择⽇期和时间：
6. 本地⽇期时间(<input type=”datetime-local”/>)
顾名思义，就是⽤本地时间显⽰。
请选择⽇期和时间：
除了上⾯这些类型为，⽇期输⼊类型还有⼀些其它属性需要注意。
属性描述
值这是HTML⾥input元素的通⽤属性。就是输⼊框⾥的数据。min⽇期或时间的最⼩值
max⽇期或时间的最⼤值
step 步长。不同的类型有不同的缺省步长。
Date – 缺省是1天
Week – 缺省是1周
Month – 缺省是1⽉
Time – 缺省是1分钟
DateTime – 缺省是1分钟
Local DateTime – 缺省是1分钟
属性描述

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。