進階調整 Intl.DateTimeFormat 的時間為 24 小時制

前言

  在先前的 調整 Intl.DateTimeFormat 的時間為 24 小時制 介紹了調整為 24 小時制的方法，但調整的方法其實不只這一種，有另外一種調整法，在此把學習的過程做個紀錄。

內容

  範例如下

const date = new Date(Date.UTC(2020, 11, 20, 16, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h23',
}).format(date));//2020/12/21 00:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h24',
}).format(date));//2020/12/21 24:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h12',
}).format(date));//2020/12/21 凌晨12:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h11',
}).format(date));//2020/12/21 上午0:23

上次 調整 Intl.DateTimeFormat 的時間為 24 小時制 是透過 hour12 來調整，這次會使用 hourCycle ，有 4 種參數可以調，分別是 h11 、h12 、h23 與 h24 ，範例都分別示範一次，同為24 小時制有兩種顯示方式，一種顯示 00 ，另一種顯示 24 ，h11 與 h12 也是一樣。使用上要注意 hour12 與 hourCycle  最好不要同時使用，可能在不同瀏覽器會有不同的結果，hour12  為 True 可以用 h12 來替代，為 False 時使用 h24 來替代，這樣就可以完全用不到 hour12  ，也就不會發生混用的情形。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor'

相關文章與資料

初探 Intl.DateTimeFormat

調整 Intl.DateTimeFormat 的格式

自訂 Intl.DateTimeFormat 的格式

調整 Intl.DateTimeFormat 的時間為 24 小時制