📅 最后修改于: 2023-12-03 15:01:14.128000 🧑 作者: Mango
HTML5中新增加了许多表单元素，其中包括了日期选择器(date picker)，可以让程序员们更加方便地让用户选择日期。本文将介绍HTML日期表单属性，并提供相关代码片段。
<input type="date">元素是HTML5新加入的日期选择器，它可以让用户通过简单的日历选择器来选择日期。该元素的date属性用于指定日期格式，例如：
<input type="date" name="start_date" date="YYYY-MM-DD">
在默认情况下，日期选择器会显示本地日期格式，但是通过指定date属性，我们可以让日期选择器显示指定格式的日期。
<input type="date">元素也支持min和max属性，这两个属性分别用于指定可选日期的最小值和最大值。例如：
<input type="date" name="start_date" min="2021-01-01" max="2021-12-31">
在上面的示例中，日期选择器将只显示2021年1月1日至2021年12月31日之间的日期。如果用户试图选择超出此范围的日期，那么将无法提交表单。
<input type="date">元素的value属性用于指定日期选择器的默认值。例如：
<input type="date" name="start_date" value="2021-09-01">
在上面的示例中，日期选择器将默认显示2021年9月1日，而不是当前日期。
<input type="date">元素的required属性指定了这个输入框必须填写。这意味着在用户没有选择日期时，将无法提交表单。
<input type="date" name="start_date" required>
<input type="date">元素也支持onchange事件，用于指定当用户选择一个日期时要执行的JavaScript代码。例如：
<input type="date" name="start_date" onchange="dateChanged()">
在上面的示例中，当用户选择一个日期时，dateChanged()函数将被调用。
下面是一个完整的HTML代码片段，展示了如何使用<input type="date">元素：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Date Input</title>
</head>
<body>
<form>
<label for="start_date">Start Date:</label>
<input type="date" name="start_date" id="start_date" min="2021-01-01" max="2021-12-31" value="2021-09-01" required onchange="dateChanged()">
<br>
<label for="end_date">End Date:</label>
<input type="date" name="end_date" id="end_date" min="2021-01-01" max="2021-12-31" value="2021-12-31" required onchange="dateChanged()">
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function dateChanged() {
console.log("Date changed!");
}
</script>
</body>
</html>
在上面的代码中，我们创建了一个表单，其中包含两个日期选择器元素。每个元素都有一个label，一个name，一个id，一个最小日期值，一个最大日期值，一个默认值，一个必填项标识和一个onchange事件。我们还定义了一个JavaScript函数dateChanged()，该函数将在任何一个日期选择器元素中选择值时调用。