HTML5日期输入类型(date)

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”/>)

这是最简单的一种显示，没有日历，只能选择时间。

请选择时间： 

截图：

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分钟