<input type="datetime-local">

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-07-25 08:36:00

<input type="datetime-local">控件允许用户在控件中选择/输入日期和时间。日期部分包括“年”、“月”和“日”，时间部分包括“时”和“分”。

<input type="datetime-local">的定义形式

下面给出了<input type="datetime-local">的一个较完整的定义形式。

<input type="datetime-local" id="dt1" name="dt1" value="2023-07-25T08:37"

           min="2023-07-01T00:00" max="2023-07-31T23:59" step="900">

type属性用于给出<input>元素定义的类型为datetime-local。

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

name属性给出该控件的名称，可以用户客户端脚本获取本控件，同时当表单提交到服务器端时，服务器端脚本可以通过名称获取该控件的值。

该控件在点击后会出现一个供用户选择日期和时间的界面，其形式如下图所示：

HTML datetime-local控件

该界面中左侧用于选择年月日，右侧用于选择时和分，时和分可以通过鼠标滚动轮上下滚动（鼠标在时或分区域内时）或键盘中的上下键（需用户点击了某个值后）来选择。

其他属性将在下面一一介绍。

value属性

value属性用于给出<input type="datetime-local">控件的默认值，即在用户没有选择/输入任何值时，此控件将以value属性给出的值传递到目标文件进行处理。

value的值的形式应该是：yyyy-MM-ddThh:mm，T前边是日期的年月日，T后边为时和分。

max属性

max属性是<input type="datetime-local">控件可接受的最大日期时间值，其设置的值的形式与value属性相同，如果给定的值是无效的日期时间字符串，则该属性设置将失效，即该控件没有最大值限制。

如果value属性给定的日期时间字符串比max属性设置的值还晚（大），则该控件将无法通过表单验证，在表单提交时将给出提示，并阻止表单提交。

min属性

min属性用于给出该控件可接受的最早日期时间值。其值的形式与value属性值的形式相同，即：yyyy-MM-ddThh:mm。如果该属性的值设置的是无效的日期时间字符串，则min属性的设置将会无效，即该控件没有最小值的限制。

如果value属性的值设置的值比min属性设置的值小，则该控件将无法通过验证，在表单提交时将会给出提示，并阻止表单提交。

注意：如果<input type="datetime-local">同时设置了max属性和min属性，则min属性的值应小于或等于max属性设置的日期时间值。

step属性

step属性用于给出<input type="datetime-local">控件可选择日期时间的间隔。

step属性值的单位是秒，默认为60，即表示60秒。

因为该控件的时间部分仅支持到分钟，当配置的step属性值不是60的整数倍时，该控件可能会四舍五入到最接近的一个值。

其调整的时间间隔规则如下：

如果<input type="datetime-local">指定了min属性，则step属性开始的参考基点是min属性的值。

如果指定了max属性，则是以max属性指定值开始往前的时间间隔。

如果指定了value属性，则以value属性给出的日期时间作为基点往前往后的时间间隔。

<input type="datetime-local">使用的例子

（1）基本用法

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

 <label for="e1">请输入开始授课时间：</label>

 <input type="datetime-local" id="e1" name="e1">

 <br><br>

 <input type="submit">

</form>

其显示效果如下：

html datetime-local控件基本示例

（2）指定max属性和min属性

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

 <label for="e2">请输入开始授课时间：</label>

 <input type="datetime-local" id="e2" name="e1"  min="2023-07-25T08:30"

    max="2023-08-20T18:30">

  <br><br>

 <input type="submit">

</form>

其显示效果如下图所示：

html datetime-local控件设置min和max属性

（3）指定value属性

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

 <label for="e3">请输入开始授课时间：</label>

 <input type="datetime-local" id="e3" name="e1"  value="2023-07-25T08:37">

 <br><br>

 <input type="submit">

</form>

其显示效果如下图所示：

html datetime-local控件设置value属性

（4）指定step属性

<p>该例中的step属性都设置为900，即15分钟</p>

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

 <p>指定了min属性:2023-07-10T00:00</p>

 <input type="datetime-local" id="s1" name="dt1" step="900" min="2023-07-10T00:00">

 <p>指定了max属性:2023-07-31T23:59</p>

 <input type="datetime-local" id="s2" name="dt2" step="900" max="2023-07-31T23:55">

 <p>指定了value属性:2023-07-25T08:37</p>

 <input type="datetime-local" id="s3" name="dt3" step="900" value="2023-07-25T08:37">

 <p>指定了min属性、max属性和value属性</p>

 <input type="datetime-local" id="s4" name="dt4" step="900"

            min="2023-07-10T00:00"

            max="2023-07-31T23:59"

            value="2023-07-25T08:37">

  <br><br>

 <input type="submit">

</form>