如何使用 HTML 在表单中添加日期选择器?

htmlweb developmentfront end technology更新于 2025/4/20 6:36:17

表单是任何应用程序的关键且典型的组件。它们包含姓名、性别、电子邮件等输入字段。日期选择器在许多表单中用于填充日期类型的输入。我们知道，从日历中选择特定日期是通过日期选择器完成的。日期选择器是一种交互式下拉菜单，无需手动输入日期，可以轻松地从日历中选择日期。在许多情况下，它也用于保存用户的生日。

让我们深入研究本文，以便更好地理解如何使用 HTML 在表单中添加日期选择器。这可以通过使用

HTML <input type="date">

带有 type="date" 的 <input> 元素创建输入字段，用户可以使用验证输入的文本框或特定的日期选择器界面输入日期。结果值包含时间，但不包含年、月、日。时间和日期+时间输入通过 time 和 datetime-local 输入类型支持。

语法

以下是 HTML <input type="date"> 的语法

<input type="date">

让我们查看以下示例，以进一步了解如何使用 HTML 在表单中添加日期选择器。

示例

让我们查看 <input type="date"> 的通用用法示例

<!DOCTYPE html>
<html>
<body>
   <label for="nane">Name:</label>
   <input type="text" id="name" name="name">
   <br />
   <label for="DOB">Enter Date Of Birth:</label>
   <input type="date" id="DOB" name="DOB">
</body>
</html>

运行上述代码后，将弹出输出窗口，显示姓名输入字段和日期选择器下拉日历，供用户选择出生日期。

示例

以下是我们将向日期选择器添加 min 和 max 属性的示例。

<!DOCTYPE html>
<html>
<body>
   <form> Enter Vacation Date: <input type="date" name="Vacation" min="2023-05-06" max="2023-05-25">
      <br /> Reason : <input type="text" name="reason">
   </form>
</body>
</html>

执行上述代码后，将生成一个输出，其中包含上述日期选择器以及 min 和 max 属性，允许用户选择两者之间的日期，同时还会在网页上显示一个输入字段。

示例

在下面的示例中，我们将添加输入类型"datetime-local"并使用 value 属性。

<!DOCTYPE html>
<html>
<body>
   <label for="time">Choose Party Date And Time :</label>
   <input id="time" type="datetime-local" name="time" value="2023-05-05T11:55" />
</body>
</html>

运行上述代码后，将弹出输出窗口，允许用户在 datetime-local 的帮助下输入日期以及派对开始的时间。

示例

考虑以下示例，我们将检查用户输入的有效性。

<!DOCTYPE html>
<html>
<body>
   <form>
      <div>
         <label for="party"> Choose Preferred Date And Time: </label>
         <input id="party" type="datetime-local" name="partydate" min="2023-05-05T07:30" max="2023-05-30T16:30" required />
         <span class="validity"></span>
      </div>
      <div>
         <input type="submit" value="Book For Party!">
      </div>
   </form>
</body>
</html>

执行上述代码后，输出窗口会弹出，显示日期和时间选择器供用户选择，并带有一个提交按钮。当用户点击按钮时，它会检查输入是否有效。