当前位置：翔宇亭IT乐园 → IT知识库 → WEB → HTML

<input type="date">

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-07-24 12:17:19

在HTML中，<input type="date">为用户提供一个选择/输入日期的控件。该日期控件包含了年月日部分，而不包括时间部分。

HTML 日期控件定义的格式

<input type="date" id="d1" name="d1" value="2023-07-24">

其中，type属性用于指定<input>元素的类型为"date"，即定义一个日期控件。

id属性用于标识控件，以方便客户端脚本可以获取到该控件。

name属性是定义控件的名称，通过该属性客户端脚本也可以获取到该控件，同时也可以在表单提交后，服务器端脚本通过名称来获取控件的值。

value属性定义控件的默认日期。

value属性

value属性用于给出<input type="date">的默认值，该值应是一个有效的日期字符串，其形式为：yyyy-mm-dd，其中，yyyy表示4位的年份，mm代表月份，dd代表日，如2023-07-24。

max属性

max属性用于指定日期控件可接受的最大日期。

如果输入的日期超出max指定的值，在表单提交时将给出提示，并阻止表单进行提交。

如果max属性的值设置的是无效的日期字符串，则日期控件将不受max属性的影响，亦即没有最大日期的限制。

<form action="form_example.asp" method="post">

 <input type="date" id="d2" name="d1" value="2023-07-24" max="2023-08-31">

 <br><br>

 <input type="submit">

</form>

上例中，加入用户输入的日期超过了允许的最大日期，在提交表单时，将会给出下图所示的提示。

HTML日期控件max属性

min属性

min属性用于指定日期控件可接受的最早日期。

如果用户输入控件的日期比min属性的值更小，则在表单提交时，将控件会给出相应的提示，并阻止表单提交。

如果min属性值是无效的日期字符串，则min属性的设置是无效的，亦即日期控件没有最小日期的限制。

下例指定了日期控件的最小日期值是：2023-07-10。

<form action="form_example.asp" method="post">

 <input type="date" id="d3" name="d1" value="2023-07-24" min="2023-07-10">

 <br><br>

 <input type="submit">

</form>

当用户输入的日期值小于min属性指定的值时，将出现下图所示的提示：

HTML日期控件min属性

注意：当同时指定max属性和min属性时，min属性代表的日期应早于或等于max属性指定的日期。

step属性

step属性用于设置日期控件中日期的间隔。

该属性是一个大于0的整数。step属性的默认值是1。

如果指定了min属性，则用户可以选择的日期是从min属性指定的日期开始，往后每隔step-1天的日期是可以被用户选择的日期。

如果指定了max属性，则用户可以选择的日期是从max属性指定的日期开始，往前每隔step-1天的日期是可以被用户选择的日期。

如果未指定min属性和max属性，但指定了value属性，则用户可以选择的日期是从value属性指定的日期开始，往前或往后每隔step-1天的日期是可以被用户选择的日期。

如果以上属性都未设置，则控件提供适当的默认值。

下例演示了step属性的使用。

<form action="form_example.asp" method="post">

 <input type="date" id="s1" name="d1" step="3" min="2023-07-10">

 <input type="date" id="s2" name="d2" step="3" max="2023-07-31">

 <input type="date" id="s3" name="d3" step="3" value="2023-07-24">

 <input type="date" id="s4" name="d1" step="3"

        min="2023-07-10"

        max="2023-07-31"

        value="2023-07-24">

 <br><br>

 <input type="submit">

</form>