HTML5 – 日期时间

HTML5中引入了一些新控件，其中包括日期和时间控件。其目的是为了让用户更方便地选择日期和时间，同时避免一些常见的输入错误。

日期控件

日期控件是一种允许用户选择日期的控件。在HTML5中，可以使用以下代码创建日期控件：

<input type="date" name="bookingDate">

上面的代码将创建一个日期控件，并设置该控件的名称为bookingDate。当用户选择日期时，该日期将自动保存到该名称相应的表单字段中。

可以注意到，日期控件会根据用户的本地化设置显示相应的日期格式。在美国，日期控件将显示月/日/年的格式，而在欧洲，控件将显示日/月/年的格式。

如果想要对日期控件进行一些样式上的修改，可以使用CSS：

input[type="date"] {
  background-color: #F3F3F3;
  border: none;
  border-radius: 5px;
  padding: 5px;
}

上面的代码将为日期控件设置背景颜色为灰色，去除边框线，并以圆角方式呈现。

时间控件

时间控件是一种允许用户选择时间的控件。在HTML5中，可以使用以下代码创建时间控件：

<input type="time" name="bookingTime">

与日期控件类似，时间控件会自动根据用户的本地化设置显示相应的时间格式。在美国，时间控件将显示AM/PM格式，而在欧洲，控件将显示24小时制。

同样地，可以使用CSS对时间控件进行样式上的修改：

input[type="time"] {
  background-color: #F3F3F3;
  border: none;
  border-radius: 5px;
  padding: 5px;
}

上面的代码将为时间控件设置背景颜色为灰色，去除边框线，并以圆角方式呈现。

日期时间控件

日期时间控件是同时包含日期和时间的控件。在HTML5中，可以使用以下代码创建日期时间控件：

<input type="datetime-local" name="bookingDateTime">

值得注意的是，日期时间控件使用本地时间，而不是UTC时间。这就意味着，在不同时区的设备上，选择同一日期时间值将会得到不同的结果。

同样地，可以使用CSS对日期时间控件进行样式上的修改：

input[type="datetime-local"] {
  background-color: #F3F3F3;
  border: none;
  border-radius: 5px;
  padding: 5px;
}

上面的代码将为日期时间控件设置背景颜色为灰色，去除边框线，并以圆角方式呈现。

结论

HTML5中引入了日期、时间和日期时间控件，可以让用户更方便地选择日期和时间，并避免常见输入错误。通过使用CSS，可以对这些控件进行样式上的修改，以使其更加符合网站的整体设计。在使用这些控件时，需要注意在不同时区的设备上，选择同一日期时间值将会得到不同的结果。