HTML | DOM 输入日期时间 defaultValue 属性

介绍

在 HTML 中，我们可以使用 <input> 元素的 type 属性来创建日期、时间和日期时间输入框。而 defaultValue 属性用于设置输入框的默认值。

默认情况下，日期、时间和日期时间输入框的 defaultValue 属性值为空。但是，我们可以使用 JavaScript 或服务器端代码来动态地设置输入框的默认值。

语法

以下是设置输入日期时间的默认值的语法：

<input type="date" id="myDate" value="defaultValue">
<input type="time" id="myTime" value="defaultValue">
<input type="datetime-local" id="myDateTime" value="defaultValue">

示例

设置日期输入框的默认值

<input type="date" id="myDate" value="2022-01-01">

设置时间输入框的默认值

<input type="time" id="myTime" value="09:00">

设置日期时间输入框的默认值

<input type="datetime-local" id="myDateTime" value="2022-01-01T09:00">

JavaScript 中设置默认值

通过 JavaScript，我们可以在页面加载时，使用 DOM 来动态设置输入框的默认值。

首先，我们需要获取对应的输入框元素，然后使用 defaultValue 属性来设置默认值。以下是一个示例：

<input type="date" id="myDate">
<script>
  document.getElementById("myDate").defaultValue = "2022-01-01";
</script>

要设置时间输入框和日期时间输入框的默认值，也是类似的方式。

总结

defaultValue 属性可用于设置输入日期时间的默认值。我们可以直接在 HTML 中设置默认值，也可以使用 JavaScript 动态设置默认值。这对于提高用户体验和简化用户输入是非常有用的功能。

注意：defaultValue 属性并不会影响原始的 <input> 元素的 value 属性。如果用户更改了输入框的值，value 属性会被更新，而 defaultValue 属性则保持不变。