HOWTO · jQuery

在 jQuery 中使用 DateTimePicker 格式化日期和時間

本文向你展示瞭如何使用 jQuery 外掛格式化日期和時間。

本頁內容

如果你只想選擇日期,你應該使用一個名為 DatePicker 的 jQuery 外掛。但有時,你必須同時選擇日期和時間,因此你必須使用名為 DateTimePicker 的 jQuery 外掛。

本文將使用 DateTimePicker 來格式化日期。

在 jQuery 中使用 DateTimePicker 格式化日期和時間

DateTimePicker 提供了編寫將出現在 datetimepicker 控制元件中的日期和時間值的能力。

要使用 DateTimePicker,首先需要下載 jQuery 外掛。你可以在這裡下載]。

下載後,你必須提取這些檔案。

jquery 外掛檔案

你不必使用所有檔案。你只能使用 jquery.jsjquery.datetimepicker.full.min.jsjquery.datetimepicker.min.css 檔案。

請記住,你必須將這些檔案放在同一目錄中。你可以在主資料夾中獲得 jquery.js,在 build 目錄中獲得剩餘檔案。

要在 jQuery DateTimePicker 中格式化日期,請更改傳送到 datetimepicker 函式的專案內的格式屬性。

例如,我們可以編寫以下內容。要執行此程式碼,你需要將檔案儲存為 HTML 檔案並在瀏覽器中執行。

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      type="text/css"
      href="jquery.datetimepicker.min.css"
    />
    <script src="jquery.js"></script>
    <script src="jquery.datetimepicker.full.min.js"></script>
  </head>
  <body>
    <input id="datetimepicker" type="text" />
    <script>
      $("#datetimepicker").datetimepicker({
        format: "d/m/Y H:m:s",
      });
    </script>
  </body>
</html>

請記住:檔案 jquery.js 應該包含在 jquery.datetimepicker.full.min.js 之上。

我們有日期和時間選擇器的 input 元素,包括 jQuery 指令碼、連結標籤和 jQuery datetimepicker。然後,我們使用實體呼叫 datetimepicker 以將格式屬性修改為 d/m/Y,以便更好的擬合出現在 DD-MM-YYYY 格式的輸入中。

這裡,d 代表日期,m 代表月份,Y 代表年份。同樣,H 代表小時,m 代表分鐘,s 代表秒。

輸出:

jquery 日期時間格式

在這裡,日期時間格式為 d/m/YH:m:s。你可以通過傳遞日期和時間格式來更改輸入格式。

總之,要使用 jQuery DateTimePicker 格式化日期,請更改傳送到 datetimepicker 函式的物件中的格式屬性。