在 JavaScript 中以 12 小時 AM/PM 格式顯示日期時間

Tahseen Tauseef 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中通過建立自己的函式方法以 12 小時 AM/PM 格式顯示日期時間
  2. 使用 JavaScript 中的 Date.prototype.toLocaleString 方法以 12 小時 AM/PM 格式顯示 DateTime
  3. 使用 JavaScript 中的 Date.prototype.toLocaleTimeString 方法以 12 小時 AM/PM 格式顯示日期時間
  4. 使用 JavaScript 中的 moment.js 方法以 12 小時 AM/PM 格式顯示日期時間
  5. まとめ
在 JavaScript 中以 12 小時 AM/PM 格式顯示日期時間

在 JavaScript 中,24 小時格式用作日期時間的預設值。我們還可以使用幾種不同的方法以 12 小時 AM/PM 格式顯示日期時間。

在本教程中,我們將探索這些方法。12 小時制時間將以小時、分鐘和秒 (HH:MM:SS) 格式顯示,帶有 AM/PM。

在 JavaScript 中通過建立自己的函式方法以 12 小時 AM/PM 格式顯示日期時間

將 JavaScript 日期時間格式化為 12 小時 AM/PM 格式的第一種方法是建立函式。

首先,在這種方法中僅使用本機方法來更改日期時間格式。為了以通俗易懂的方式說明這一點,請使用以下示例:應用模% 運算子來查詢 12 小時格式的日期時間並使用條件 ? 運營商申請上午或下午。

例子:

const formatAMPM = (date) => {
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let ampm = hours >= 12 ? 'pm' : 'am';
    hours = hours % 12;
    hours = hours ? hours : 12;
    minutes = minutes.toString().padStart(2, '0');
    let strTime = hours + ':' + minutes + ' ' + ampm;
    return strTime;
}

console.log(formatAMPM(new Date(2022, 1, 1)));

你有 formatAMPM 函式,它將 JavaScript date 物件作為引數。呼叫 getHours 獲取函式中 24 小時格式的小時數,呼叫 minutes 獲取分鐘數。

然後,建立 ampm 變數並根據小時的值將其設定為 ampm。使用 % 運算子將小時更改為 12 小時格式,以獲得除以 12 的餘數。

接下來,使用 toString() 函式將分鐘轉換為字串,然後使用 padStart 函式將字串填充為 0,如果它只有一個數字。最後,使用 strTime 將所有內容聯絡在一起。

輸出:

12 小時 AM/PM 中的 DateTime 建立自己的函式輸出

使用 JavaScript 中的 Date.prototype.toLocaleString 方法以 12 小時 AM/PM 格式顯示 DateTime

你將使用的第二種方法是 Date.prototype.toLocaleString 方法。此方法使使用者更容易將日期時間格式化為 AM/PM 格式。

在此方法中,你將利用稱為 toLocaleString 函式的內建函式來更改給定日期的格式。toLocaleString(): 將返回日期物件的字串表示形式。

Localeoptions, 這兩個引數允許自定義方法的行為。

例子:

const str = new Date(2022, 1, 1).toLocaleString('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    hour12: true
})
console.log(str);

使用 localeobject 和一些選項在你的日期物件上呼叫 toLocaleString 函式。小時 設定為數字以數字格式顯示小時。

這與分鐘相同。然後,hour12 以 12 小時格式顯示小時數。

輸出:

使用 Date.prototype.toLocaleString 的 12 小時 AM/PM 中的 DateTime

使用 JavaScript 中的 Date.prototype.toLocaleTimeString 方法以 12 小時 AM/PM 格式顯示日期時間

你可以使用的第三種方法是 Date.prototype.toLocaleTimeString 方法。此方法將用 toLocaleTimeString 替換 toLocaleString 並將為你提供與 toLocaleString 函式相同的結果。

例子:

const str = new Date(2022, 1, 1).toLocaleTimeString('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    hour12: true
})
console.log(str);

輸出:

使用 Date.prototype.toLocaleTimeString 的 12 小時 AM/PM 中的 DateTime

使用 JavaScript 中的 moment.js 方法以 12 小時 AM/PM 格式顯示日期時間

你可以使用的第四種方法是 moment.js 方法。此方法將日期物件格式化為 12 小時 AM/PM 格式。

為此,你將首先呼叫 format 方法。

其中,

  • a 新增 AM/PM
  • hh 是兩位數小時的格式程式碼;
  • mm 是兩位數分鐘的格式程式碼。

例子:

const str = moment(new Date(2022, 1, 1)).format('hh:mm a')
console.log(str);

輸出:

使用 moment.js 的 12 小時 AM/PM 日期時間

まとめ

在本文中,你學習了各種方法,例如建立我們的函式 Date.prototype.toLocaleStringDate.prototype.toLocaleTimeStringmoment.js,它們可以以 12 小時 AM/PM 格式顯示 JavaScript 日期時間。所有這些方法都同樣適用,可以很容易地使用。

相關文章 - JavaScript DateTime