如何在HTML中仅使用一个标签添加日期和时间选择器？

将日期和时间选择器整合到Web表单中是许多Web开发者的常见需求。你可能认为添加日期和时间选择器是一项复杂的任务，可能需要使用JavaScript库。但令人惊讶的是，使用HTML提供的标签，这是一项相对简单的任务。这可以显著减少在Web应用程序中实现日期和时间选择器所需的代码量和时间。

语法

<input type = "value" ... />

<input>标签是HTML中的一个交互式元素，其主要目的是从用户那里获取不同形式的输入。标签的type属性指定用户应输入哪种类型的输入。

方法

我们将使用input标签来获取所需的日期和时间选择器。为了获得日期选择器，我们可以使用以下标签：

<input type="date">

而为了获得时间选择器，我们可以使用以下标签：

<input type="time">

但是，这将导致使用两个标签来获取所需的时间和日期选择器。为了仅使用一个标签获得所需的结果，我们将使用datetime-local类型值。标签如下所示：

<input type="datetime-local">

这段代码有两个主要部分：

  • <head>

  • <body>

<head>部分相对简单且不言自明，因为它只包含一些关于文档的元数据。转到<body>部分，它由一些元素组成，但您应该注意的是输入字段。输入字段就是魔法发生的地方。我们使用了之前讨论过的“datetime-local”属性来创建<input>标签。使用此属性表示浏览器创建组合的日期和时间选择器控件。

示例

以下是我们将在此示例中介绍的完整代码：

<!DOCTYPE html>
<html>
<head>
   <title>How to add date and time picker using only one tag in HTML?</title>
</head>
<body>
   <h4>How to add date and time picker using only one tag in HTML?</h4>
   <div>
      <p>Date and Time Picker </p>
      <input type="datetime-local" />
   </div>
</body>
</html>

结论

在本文中，我们了解了如何使用input标签在HTML中获取日期和时间选择器。我们看到了两种不同的替代方案，一种可以使用两个标签获得所需结果，另一种可以使用单个标签获得所需输出。

更新于：2023年3月28日

879 次浏览

启动你的职业生涯

通过完成课程获得认证

开始
广告