HTML | DOM 输入时间值属性

在HTML中，我们可以使用<input>元素来接收用户的输入，其中包括日期和时间。为了处理这些输入，HTML提供了一些属性和方法，包括：

• type="date"：输入日期，格式为yyyy-mm-dd
• type="time"：输入时间，格式为hh:mm
• type="datetime-local"：输入日期和时间，格式为yyyy-mm-ddThh:mm
• value：在元素中设置或获取日期和时间值
• min和max：在元素中设置或获取允许输入的最小和最大时间值
• step：在元素中设置或获取增加或减少时间的步长

示例代码

输入日期

<label for="date">选择一个日期：</label>
<input type="date" id="date" name="date" value="2021-11-11" min="2021-01-01" max="2021-12-31">

以上代码会创建一个输入框，允许用户选择日期，初始值为2021-11-11，最小值为2021-01-01，最大值为2021-12-31。用户可以通过鼠标单击选择日期，也可以手动输入日期。

输入时间

<label for="time">选择一个时间：</label>
<input type="time" id="time" name="time" value="16:00" min="09:00" max="18:00" step="1800">

以上代码会创建一个输入框，允许用户选择时间，初始值为16:00，最小值为09:00，最大值为18:00，步长为1800秒（30分钟）。用户可以通过鼠标单击选择时间，也可以手动输入时间。

输入日期和时间

<label for="datetime">选择一个日期和时间：</label>
<input type="datetime-local" id="datetime" name="datetime" min="2021-01-01T00:00" max="2021-12-31T23:59" step="60">

以上代码会创建一个输入框，允许用户选择日期和时间。没有初始值，最小值为2021-01-01 00:00，最大值为2021-12-31 23:59，步长为60秒（1分钟）。用户可以通过鼠标单击选择日期和时间，也可以手动输入日期和时间。

DOM操作

我们可以通过JavaScript来操作这些表单元素。

const dateInput = document.getElementById("date");
const timeInput = document.getElementById("time");
const datetimeInput = document.getElementById("datetime");

console.log(dateInput.value); // "2021-11-11"
console.log(timeInput.value); // "16:00"
console.log(datetimeInput.value); // "2021-11-11T16:00"

dateInput.value = "2021-12-25";
timeInput.value = "09:30";
datetimeInput.value = "2021-12-25T09:30";

以上代码会获取输入框元素，并输出其当前的值。我们也可以通过修改value属性，来改变输入框元素的值。

注：以上示例仅作为演示，实际使用时应编写更严谨的代码。