【JavaScript】Intl.DateTimeFormat の使い方｜日付・時刻をロケールに合わせて整形する方法

const date = new Date('2026-09-21T14:05:09+09:00');

console.log(new Intl.DateTimeFormat('ja-JP').format(date)); // "2026/9/21"
console.log(new Intl.DateTimeFormat('en-US').format(date)); // "9/21/2026"
console.log(new Intl.DateTimeFormat('en-GB').format(date)); // "21/09/2026"
console.log(new Intl.DateTimeFormat('de-DE').format(date)); // "21.9.2026"

const date = new Date('2026-09-21T14:05:09+09:00');

// この2行は同じ結果になる
console.log(date.toLocaleDateString('ja-JP', { dateStyle: 'full' }));
console.log(new Intl.DateTimeFormat('ja-JP', { dateStyle: 'full' }).format(date));
// どちらも "2026年9月21日月曜日"

// フォーマッターは1回だけ作る
const formatter = new Intl.DateTimeFormat('ja-JP', {
  dateStyle: 'medium',
  timeZone: 'Asia/Tokyo',
});

const posts = [
  { title: '記事A', publishedAt: '2026-09-21T14:05:09+09:00' },
  { title: '記事B', publishedAt: '2026-08-03T09:30:00+09:00' },
];

// 何行あっても format() を呼ぶだけ
const rows = posts.map(
  (post) => `${post.title}（${formatter.format(new Date(post.publishedAt))}）`
);
console.log(rows);
// [ "記事A（2026/09/21）", "記事B（2026/08/03）" ]

const date = new Date('2026-09-21T14:05:09+09:00');
const opt = (o) => new Intl.DateTimeFormat('ja-JP', { ...o, timeZone: 'Asia/Tokyo' }).format(date);

console.log(opt({ dateStyle: 'full' }));   // "2026年9月21日月曜日"
console.log(opt({ dateStyle: 'long' }));   // "2026年9月21日"
console.log(opt({ dateStyle: 'medium' })); // "2026/09/21"
console.log(opt({ dateStyle: 'short' }));  // "2026/09/21"

console.log(opt({ timeStyle: 'full' }));   // "14時05分09秒 日本標準時"
console.log(opt({ timeStyle: 'medium' })); // "14:05:09"
console.log(opt({ timeStyle: 'short' }));  // "14:05"

// 日付と時刻をまとめて出す
console.log(opt({ dateStyle: 'full', timeStyle: 'short' }));
// "2026年9月21日月曜日 14:05"

const date = new Date('2026-09-21T14:05:09+09:00');
const opt = (o) => new Intl.DateTimeFormat('ja-JP', { ...o, timeZone: 'Asia/Tokyo' }).format(date);

// 年月日 + 曜日
console.log(opt({ year: 'numeric', month: 'long', day: 'numeric', weekday: 'short' }));
// "2026年9月21日(月)"

// 0埋めした年月日
console.log(opt({ year: 'numeric', month: '2-digit', day: '2-digit' }));
// "2026/09/21"

// 月日だけ
console.log(opt({ month: 'numeric', day: 'numeric' })); // "9/21"

// 年月だけ（記事アーカイブの見出しなどに）
console.log(opt({ year: 'numeric', month: 'long' }));   // "2026年9月"

// 時刻だけ
console.log(opt({ hour: '2-digit', minute: '2-digit' })); // "14:05"

// 12時間制にする
console.log(opt({ hour: 'numeric', minute: '2-digit', hour12: true })); // "午後2:05"

const date = new Date('2026-09-21T14:05:09+09:00');

// ロケール文字列に書く方法
console.log(
  new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
    dateStyle: 'long',
    timeZone: 'Asia/Tokyo',
  }).format(date)
); // "令和8年9月21日"

// オプションで書く方法（結果は同じ）
console.log(
  new Intl.DateTimeFormat('ja-JP', {
    calendar: 'japanese',
    dateStyle: 'long',
    timeZone: 'Asia/Tokyo',
  }).format(date)
); // "令和8年9月21日"

// 短い形式では元号がアルファベット1文字になる
console.log(
  new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
    dateStyle: 'short',
    timeZone: 'Asia/Tokyo',
  }).format(date)
); // "R8/9/21"

// 日本時間で 2026年9月21日 14:05 の瞬間
const date = new Date('2026-09-21T14:05:09+09:00');

console.log(
  new Intl.DateTimeFormat('ja-JP', {
    dateStyle: 'medium',
    timeStyle: 'short',
    timeZone: 'Asia/Tokyo',
  }).format(date)
); // "2026/09/21 14:05"

console.log(
  new Intl.DateTimeFormat('ja-JP', {
    dateStyle: 'medium',
    timeStyle: 'short',
    timeZone: 'America/New_York',
  }).format(date)
); // "2026/09/21 1:05"（ニューヨークでは同じ日の午前1時5分）

// タイムゾーン名を添える
console.log(
  new Intl.DateTimeFormat('ja-JP', {
    hour: '2-digit',
    minute: '2-digit',
    timeZone: 'America/New_York',
    timeZoneName: 'long',
  }).format(date)
); // "01:05 アメリカ東部夏時間"

const resolved = new Intl.DateTimeFormat().resolvedOptions();

console.log(resolved.timeZone);        // "Asia/Tokyo"（日本での実行例）
console.log(resolved.locale);          // "ja-JP"
console.log(resolved.calendar);        // "gregory"
console.log(resolved.numberingSystem); // "latn"

const date = new Date('2026-09-21T14:05:09+09:00');

const formatter = new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  weekday: 'short',
  timeZone: 'Asia/Tokyo',
});

console.log(formatter.formatToParts(date));
// [
//   { type: 'year',    value: '2026' },
//   { type: 'literal', value: '/' },
//   { type: 'month',   value: '09' },
//   { type: 'literal', value: '/' },
//   { type: 'day',     value: '21' },
//   { type: 'literal', value: '(' },
//   { type: 'weekday', value: '月' },
//   { type: 'literal', value: ')' }
// ]

// 必要な部品だけ取り出して組み直す
const parts = formatter.formatToParts(date);
const find = (type) => parts.find((part) => part.type === type).value;

console.log(`${find('year')}.${find('month')}.${find('day')}`); // "2026.09.21"

const start = new Date('2026-09-21T14:05:00+09:00');
const end = new Date('2026-09-24T18:30:00+09:00');

const dateFormatter = new Intl.DateTimeFormat('ja-JP', {
  dateStyle: 'medium',
  timeZone: 'Asia/Tokyo',
});
console.log(dateFormatter.formatRange(start, end)); // "2026/09/21～2026/09/24"

// 同じ日のなかでの時間帯なら、日付は1回だけになる
const dateTimeFormatter = new Intl.DateTimeFormat('ja-JP', {
  dateStyle: 'medium',
  timeStyle: 'short',
  timeZone: 'Asia/Tokyo',
});
console.log(
  dateTimeFormatter.formatRange(start, new Date('2026-09-21T18:30:00+09:00'))
); // "2026/09/21 14時05分～18時30分"

// 開始と終了が同じなら、期間ではなく単独の日付として出力される
console.log(dateFormatter.formatRange(start, start)); // "2026/09/21"

// NG: dateStyle と個別指定は同時に使えない
new Intl.DateTimeFormat('ja-JP', {
  dateStyle: 'long',
  year: '2-digit',
});
// TypeError

// OK: 個別指定だけで組み立てる
new Intl.DateTimeFormat('ja-JP', {
  year: '2-digit',
  month: 'long',
  day: 'numeric',
});