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

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

让我们深入本文，以更好地了解如何在表单中使用 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>

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

更新于： 2023年9月26日

997 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告