この記事について
-
JavaScriptで日付をフォーマットする方法を3種類紹介しています。
- "/"区切り (例: 2020/7/3)
- "西暦+年月日" (例: 2020年7月3日)
- "和暦+年月日" (例: 令和2年7月3日)
いろいろ検証した結果や調べたことも書いています。
「コピペしたいだけ！結論だけほしい！」という方は各章の「コードと解説」だけ読めばOKです。
この記事は前回の記事(時間編)の知識を前提にしています。解説で不明点があれば参考にしてみてください。
📅 "/"区切り (例: 2020/7/3)
日付を年/月/日というフォーマットで出力する方法を紹介します。
コードと解説
Intl.DateTimeFormatの引数にlocaleを設定することで、その国の標準的な日付フォーマットを取得できます。
localeが日本('ja-JP')だと「yyyy/MM/dd」の形式で表示されます。
const dateTimeFormat = new Intl.DateTimeFormat('ja-JP');
console.log(dateTimeFormat.format(new Date(2020, 6, 3)));
// 2020/7/3
localeをen-USにしてみる
localeをアメリカ(en-US)にすると、日付は「MM/dd/yyyy」の形式で表示されます。
const dateTimeFormat = new Intl.DateTimeFormat('en-US');
console.log(dateTimeFormat.format(new Date(2020, 6, 3)));
// 7/3/2020
localeを省略してみる
locale引数を省略すると、ブラウザ既定のロケール(タイムゾーン)を使用することになります。
よって、日本にいるほとんどの方は、引数なしでも「yyyy/mm/dd」が得られると思います。
const dateTimeFormat = new Intl.DateTimeFormat();
console.log(dateTimeFormat.format(new Date(2020, 6, 3)));
// 2020/7/3
ブラウザ既定のロケールについて
ブラウザ既定のロケール(タイムゾーン)は以下で確認できます。
console.log(Intl.DateTimeFormat().resolvedOptions().timeZone);
// Asia/Tokyo
📅 "西暦+年月日" (例: 2020年7月3日)
日付の区切り文字を/ではなく「年月日」にしてみます。
コードと解説
Intl.DateTimeFormatの第2引数にオプションを渡すことで日付のフォーマットを定義できます。
const dateTimeFormat = new Intl.DateTimeFormat('ja-JP', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
console.log(dateTimeFormat.format(new Date(2020, 6, 3)));
// 2020年7月3日
ポイントはmonthのフォーマットです。
long、short、narrowのいずれかを設定すると年月日表記になります(後述あり)。
yearやdayのオプションはなんでもOKですが、省略はできません(後述あり)。
en-USにしてみる
第2引数でオプションを渡しているこの状態で、第1引数のlocaleをen-USにすると、月の表記が英文字に変わります。
const dateTimeFormat = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
console.log(dateTimeFormat.format(new Date(2020, 6, 3)));
// July 3, 2020
monthのフォーマットについて
monthのフォーマットはlong以外にも用意されています。
localeja-JPでmonthにnumericや2-digitを使うと、年月日表記にならないので注意してください。
| en-US | ja-JP | |
|---|---|---|
| numeric | 7/3/2020 | 2020/7/3 |
| 2-digit | 07/3/2020 | 2020/07/3 |
| long | July 3, 2020 | 2020年7月3日 |
| short | Jul 3, 2020 | 2020年7月3日 |
| narrow | J 3, 2020 | 2020年7月3日 |
yearとdayを省略してみる
yearとdayを省略すると、その2つが出力されなくなります。
yearだけ省略すると、yearだけ出力されなくなります。dayも同様です。
const dateTimeFormat = new Intl.DateTimeFormat('ja-JP', {
// year: 'numeric',
month: 'long',
// day: 'numeric',
});
console.log(dateTimeFormat.format(new Date(2020, 6, 3)));
// 7月
オプションで年、月、日いずれかのフォーマットを1つでも定義した場合は、定義した項目しか戻しません。
なので、この方法で年月日を表示したい場合はyearとdayは省略できません。
逆に、オプションに何も指定しなければ前章の通り「yyyy/MM/dd」を返してくれます。
📅 "和暦+年月日" (例: 令和2年7月3日)
西暦(2020年)ではなく和暦(令和2年)にしてみます。
コードと解説
前章のIntl.DateTimeFormatの引数にera: 'long'を追加するだけです。
const dateTimeFormat = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
era: 'long',
year: 'numeric',
month: 'long',
day: '2-digit',
});
console.log(dateTimeFormat.format(new Date(2020, 6, 3)));
// 令和2年7月03日
year,month,dayを省略してみる
「令和」だけ表示されるのかな・・・と思ったら年月日も付いてきました。
const dateTimeFormat = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
era: 'long',
});
console.log(dateTimeFormat.format(new Date(2020, 6, 3)));
// 令和2/7/3
long以外のフォーマットにしてみる
eraも複数のフォーマットを持っています。
longとshortは「令和」になりますが、narrowだと頭文字(R)になるので注意してください。
const dateTimeFormat = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
era: 'narrow',
});
console.log(dateTimeFormat.format(new Date(2020, 6, 3)));
// R2/7/3
| ja-JP | |
|---|---|
| long | 令和2年7月3日 |
| short | 令和2年7月3日 |
| narrow | R2年7月3日 |
参考
- Intl.DateTimeFormatのオプション一覧
- 日付操作の実例集
まとめ
いろいろ検証しているうちに、JSの日付操作方法はIntl.DateTimeFormatのオプションを使えば大体どんな形式にもできることがわかってきました。
同時に、噂通りJSのDateTimeには落とし穴が多いこともよくわかりました。
タイムゾーンについてまだよくわかってないので、いつかまた勉強して記事書いてみようと思います。