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

htmlfront end technologyweb development更新于 2024/2/2 10:52:17

将日期和时间选择器集成到 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>