改用凌晨的方式表達時間

前言

  Intl.DateTimeFormat() 有參數可以改以凌晨的方式來表達時間，在此把學習的過程做個紀錄。

內容

  範例如下

const date = new Date(Date.UTC(2020, 11, 20, 16, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h11',
  dayPeriod : 'narrow',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 凌晨0:23:16.738
//
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h11',
  dayPeriod : 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 凌晨0:23:16.738
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h11',
  dayPeriod : 'long',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 凌晨0:23:16.738

改變的方法是透過 dayPeriod ，參數有三種，分別是 narrow 、 short 與 long ，範例個別示範一次，要注意的是 dayPeriod  必須搭配 hourCycle 來使用，只有當 hourCycle  是 h11 與 h12 時才有作用，範例的結果三個都是一樣的，可能跟區域有關，換成 fr 的話，第三個會有不同。

參考資料

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

相關文章與資料

初探 Intl.DateTimeFormat

調整 Intl.DateTimeFormat 的格式

自訂 Intl.DateTimeFormat 的格式

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

在 Intl.DateTimeFormat 顯示時區