HTML5 – 日期

在 HTML5 标准中，日期输入框得到了大幅度的改进和增强。现在，无需使用 JavaScript 选择日期，只需在输入框中键入日期即可。

示例

最基本的日期输入框如下所示：

<label for="birthday">出生日期：</label>
<input type="date" id="birthday" name="birthday">

这个输入框将显示一个日期选择器。在支持 HTML5 标准的现代浏览器上，用户可以打开日期选择器并选择日期。如果浏览器不支持 HTML5 标准，则该输入框将显示为文本框，用户可以手动输入日期。

除了日期输入框之外，还有时间输入框，它们的标签分别是 <input type="time"> 和 <input type="datetime-local">。

<label for="appt">预约时间：</label>
<input type="time" id="appt" name="appt">

<label for="meeting">会议时间：</label>
<input type="datetime-local" id="meeting" name="meeting">

这两个输入框分别显示了时间选择器和日期时间选择器。

另外，还有一个带有范围限制的日期输入框，它允许您指定不能选择的日期范围。

<label for="start">开始日期：</label>
<input type="date" id="start" name="start" min="2022-01-01" max="2022-12-31">

这个输入框将始终显示 2022 年的日期范围，用户不能选择此范围之外的日期。

自定义日期输入框样式

标准的日期输入框可能无法满足所有需求。您可以使用 CSS 来自定义输入框的外观。下面是一个示例，采用了一些较为常见的自定义样式：

<style>
  input[type="date"] {
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    padding: 8px;
    outline: none;
    height: 32px;
    font-size: 14px;
    color: #606266;
  }
</style>

<label for="eventdate">活动日期：</label>
<input type="date" id="eventdate" name="eventdate">

样式表将一般的输入框样式转换为了具有不同背景和边框样式的个性化输入框。您可以进一步自定义样式以适应你的网站设计。

获取和设置日期值

为了获取和设置日期输入框的值，您可以使用 JavaScript。以下是一个获取日期输入框值的示例：

const input = document.getElementById("birthday");
input.addEventListener("change", () => {
  const value = input.value;
  console.log(value); // 2022-07-31
});

这段代码监听了输入框的 change 事件，并在值改变时打印出日期。

要设置日期输入框的默认值，请将值属性设置为默认日期：

<label for="birthday">出生日期：</label>
<input type="date" id="birthday" name="birthday" value="2000-01-01">

这将在日期输入框中显示 2000 年 1 月 1 日。

结论

HTML5 标准对日期和时间输入框进行了大量的增强和改进，现在可以轻松地使用它们来选择日期和时间。您可以通过自定义样式表轻松地将其个性化以适应您的设计需求。在 JavaScript 中获取和设置日期输入框的值也变得非常容易。