如何在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 次瀏覽

啟動你的職業生涯

透過完成課程獲得認證

開始
廣告