HTML | DOM 输入日期时间名称 属性

在 HTML 中，我们可以使用输入类型为"datetime"、"date"、"time"和"month"的输入元素来获取用户输入的日期和时间。这些输入类型使用名称属性来标识输入字段，并且可以通过 DOM 操作来获取和修改其值。

datetime 输入类型

<input type="datetime"> 允许用户输入日期和时间，通常以带有日期和时间选择器的文本框的形式呈现。日期和时间的格式会根据用户所在地区的语言设置而有所不同。

<input type="datetime" name="eventDateTime" id="eventDateTime">

上述代码中创建了一个具有名称为"eventDateTime"的 datetime 输入字段，通过 id 属性也可以在 JavaScript 中获取到这个字段。

date 输入类型

<input type="date"> 允许用户输入日期，以日、月和年的格式进行输入。日期格式也会根据用户所在地区的语言设置而有所不同。

<input type="date" name="birthdate" id="birthdate">

上述代码中创建了一个具有名称为"birthdate"的 date 输入字段，通过 id 属性也可以在 JavaScript 中获取到这个字段。

time 输入类型

<input type="time"> 允许用户输入时间，以小时和分钟的格式进行输入。

<input type="time" name="eventTime" id="eventTime">

上述代码中创建了一个具有名称为"eventTime"的 time 输入字段，通过 id 属性也可以在 JavaScript 中获取到这个字段。

month 输入类型

<input type="month"> 允许用户输入年份和月份。

<input type="month" name="expirationDate" id="expirationDate">

上述代码中创建了一个具有名称为"expirationDate"的 month 输入字段，通过 id 属性也可以在 JavaScript 中获取到这个字段。

通过 JavaScript 获取和修改输入字段的值

我们可以使用 JavaScript 中的 Document 对象的 getElementById() 方法来获取输入字段的值，并使用 value 属性来访问或修改它。

// 获取 datetime 输入字段的值
const eventDateTime = document.getElementById("eventDateTime").value;

// 获取 date 输入字段的值
const birthdate = document.getElementById("birthdate").value;

// 获取 time 输入字段的值
const eventTime = document.getElementById("eventTime").value;

// 获取 month 输入字段的值
const expirationDate = document.getElementById("expirationDate").value;

上述代码演示了如何通过 JavaScript 获取不同类型输入字段的值。可以根据需要使用这些值进行后续操作。

以上是关于 HTML | DOM 输入日期时间名称属性的介绍。通过这些输入类型，我们可以方便地获取用户输入的日期和时间，并通过 JavaScript 来获取和修改输入字段的值。