HTML5 中 datetime 和 datetime-local 的區別

datetime-local 輸入型別與其他輸入型別的區別在於它不包含時區資訊。如果你的應用程式不需要考慮時區，請使用 datetime-local。datetime 輸入型別在某些瀏覽器上仍然存在相容性問題。

讓我們進一步瞭解 HTML5 中 datetime 和 datetime-local 的區別

HTML5 datetime

<time> 元素的機器可讀日期和時間由 HTML <time> datetime 屬性定義。時間和日期的輸入格式如下：YYYY-MM-DDThh:mm:ssTZD。

語法

以下是 HTML datetime 的語法

<time datetime="YYYY-MM-DDThh:mm:ssTZD">

讓我們來看下面的例子

示例

在下面的例子中，我們使用了 HTML <time> datetime 屬性。

<!DOCTYPE html>
<html>
    <body style="text-align:center;">
        <h1>HTML dateTime Attribute</h1>
        <p>Gandhi Jayathi
        <time datetime="1869--10-02 12:00">
            was declared as a dry day.
		</time>
	</p>
	</body>
</html>

輸出

當指令碼執行時，它將生成一個包含 HTML datetime 屬性中提到的文字的輸出，並將其顯示在網頁上。

示例

讓我們來看另一個 datetime 屬性的例子。

<!DOCTYPE HTML>
<html>
   <body>
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Date and Time : <input type = "datetime" name = "newinput" />
         <input type = "submit" value = "submit" />
      </form>
   </body>
</html>

輸出

執行上述指令碼後，輸出視窗將彈出，並顯示輸入欄位，供使用者在網頁上輸入 datetime 屬性中提到的日期和時間。

HTML5 datetime-local

<input>型別的元素。藉助 datetime-local，使用者可以快速輸入日期和時間，包括年份、月份、日期以及小時和分鐘。

語法

以下是 datetime-local 的語法。

<input type="datetime-local">

讓我們來看下面的例子。

示例

在下面這個例子中，我們使用 datetime-local 作為輸入型別。

<!DOCTYPE html>
<html>
    <body>
        <form>
            <label for="birthdaytime">DOB:</label>
            <input type="datetime-local" id="birthdaytime" name="birthdaytime">
            <input type="submit">
        </form>
    </body>
</html>

輸出

當指令碼執行時，它將生成一個包含輸入欄位的輸出，允許使用者在網頁上輸入 datetime-local 屬性中提到的出生日期。

示例

讓我們來看另一個 datetime-local 用法的例子。

<!DOCTYPE HTML>
<html>
   <body>
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Local Date and Time : <input type = "datetime-local" name = "newinput" />
         <input type = "submit" value = "submit" />
      </form>
   </body>
</html>

輸出

執行上述指令碼後，它將生成一個輸出，透過提供 datetime-local 屬性中提到的輸入欄位來讓使用者輸入。

更新於：2023年10月11日

3K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告