3.5 使用日期选择器
本节介绍HTML 5表单为input标签设计的全新的日期选择器（DatePicker）类型。HTML 5表单提供了大约5种形式的日期选择器，包括按照月份、周、时间等方式。
下面我们看一段在HTML 5表单中使用日期选择器的代码，这段代码（参见源代码chapter03/ch02-HTML 5form-input-datepicker.html文件）给出一种使用DatePicker类型的input标签的方法。
【示例3-4】日期选择器类型的input标签的使用
01 <!DOCTYPE html>
02 <html lang="zh-cn">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <script type="text/css">
06 label {
07 margin: 4px;
08 width: 96px;
09 text-align: justify;
10 }
11 input {
12 margin: 4px;
13 }
14 </script>
15 <title>HTML 5表单之日期选择器</title>
16 </head>
17 <body>
18 <!-- 添加文档主体内容 -->
19 <h3>HTML 5表单之日期选择器</h3>
20 <!-- 添加文档主体内容 -->
21 <form action="#" method="get" autocomplete="on">
22 <label for="id-date">Date:</label><br>
23 <input type="date" id="id-date" name="user_date" /><br/>
24 <label for="id-month">Month:</label><br>
25 <input type="month" id="id-month" name="user_date" /><br/>
26 <label for="id-week">Week:</label><br>
27 <input type="month" id="id-week" name="user_date" /><br/>
28 <label for="id-time">Time:</label><br>
29 <input type="month" id="id-time" name="user_date" /><br/>
30 <label for="id-datetime">DateTime:</label><br>
31 <input type="month" id="id-datetime" name="user_date" /><br/>
32 </form>
33 </body>
34 </html>
在这段HTML代码中，定义了一个form表单及5个input标签：第21～32行代码通过form标签定义了一个HTML 5表单，其中action属性定义为提交到当前页面，method属性定义为get方式；第22～23行代码定义了第一个type="date"类型的日期选择器。
运行测试这个页面，单击input标签右侧的下拉箭头，Date类型的日期选择器的效果如图3.8所示。
第24～25行代码定义了第二个type="month"类型的日期选择器。运行测试这个页面，单击input标签右侧的下拉箭头，Month类型的日期选择器的效果如图3.9所示。
图3.8 Date类型的日期选择器
图3.9 Month类型的日期选择器
第26～27行代码定义了第三个type="week"类型的日期选择器。运行测试这个页面，单击input标签右侧的下拉箭头，Week类型的日期选择器的效果如图3.10所示。
第28～29行代码定义了第四个type="time"类型的日期选择器。运行测试这个页面，单击input标签右侧的下拉箭头，Time类型的日期选择器的效果如图3.11所示。
图3.10 Week类型的日期选择器
图3.11 Time类型的日期选择器
第30～31行代码定义了第五个type="datetime"类型的日期选择器。运行测试这个页面，单击input标签右侧的下拉箭头，DateTime类型的日期选择器的效果如图3.12所示。
图3.12 DateTime类型的日期选择器