調整 Intl.DateTimeFormat 的格式

前言

  在先前的 初探 Intl.DateTimeFormat 提到 Intl.DateTimeFormat 的基本用法，但只能顯示日期沒辦法顯示時間，要如何顯示時間呢?在此把學習的過程做個紀錄。

內容

  範例如下

const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
}).format(date));//2020/12/20 上午11:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  timeStyle: 'short',
}).format(date));//上午11:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
}).format(date));//2020/12/20
//
console.log(new Intl.DateTimeFormat('en-us').format(date));//12/20/2020
//
console.log(new Intl.DateTimeFormat('en-us',{
  dateStyle: 'short',
}).format(date));//12/20/20
console.log(new Intl.DateTimeFormat('en-us',{
  dateStyle: 'medium',
}).format(date));//Dec 20, 2020

要顯示時間可以透過 Intl.DateTimeFormat() 的第二個參數來達成，第二個參數可以輸入 dateStyle 與  timeStyle ，兩個參數各別都可以輸入 short 、medium 、 long 與 full ，按字面上的意思就可以知道效果，範例開頭透過都輸入 short ，就可以得到同時有日期與時間的結果，如果只需要時間，就只輸入 timeStyle 參數，就可以得到只顯示時間的結果，同理，如果只顯示日期的話就只輸入 dateStyle 即可。

  範例最後三個使用是在說明在不輸入參數的顯示沒被法透過透過固定的 dateStyle  與 timeStyle  來取得 ，不輸入參數時是 12/20/2020 ，但不論 dateStyle 輸入 short 或 medium 都無法得到何不輸入的參數同樣結果。

參考資料

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

相關文章與資料

初探 Intl.DateTimeFormat