Как отобразить только определённые части даты?

Введение

Полные форматы даты, например «вторник, 15 октября 2024», подходят не всегда — часто нужно показать только отдельные части даты. Например, только месяц и год для даты публикации, только день недели для календаря или только день и месяц для дня рождения.

В JavaScript Intl.DateTimeFormat позволяет настраивать отображение каждого компонента даты отдельно. Вместо выбора готового стиля, такого как «полный» или «краткий», вы указываете, какие части включить и как их форматировать.

Компоненты даты

Дата состоит из четырёх основных компонентов, которые можно форматировать независимо друг от друга.

weekday показывает, какой это день недели. year — какой это год. month — какой это месяц. day — какой это день месяца.

Для каждого компонента доступны разные значения форматирования, которые определяют, как он будет отображаться. В объекте options вы указываете только нужные компоненты.

Форматирование дня недели

Параметр weekday отвечает за отображение дня недели. Он принимает три значения, которые определяют длину результата.

const date = new Date('2024-10-15');

const narrow = new Intl.DateTimeFormat('en-US', {
  weekday: 'narrow'
});
console.log(narrow.format(date)); // "T"

const short = new Intl.DateTimeFormat('en-US', {
  weekday: 'short'
});
console.log(short.format(date)); // "Tue"

const long = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});
console.log(long.format(date)); // "Tuesday"

Значение narrow выводит одну букву. short — сокращённое название. long — полное название дня недели.

В некоторых языках два дня недели могут иметь одинаковое сокращение в стиле narrow. Например, во вторник и четверг в английском оба начинаются с «T».

Форматирование года

Опция year отображает год. Она принимает два значения.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  year: 'numeric'
});
console.log(numeric.format(date)); // "2024"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  year: '2-digit'
});
console.log(twoDigit.format(date)); // "24"

Значение numeric показывает полный год. Значение 2-digit отображает только последние две цифры.

Форматирование месяца

Опция month отображает месяц года. Она принимает пять значений, которые дают разную степень детализации.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  month: 'numeric'
});
console.log(numeric.format(date)); // "10"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  month: '2-digit'
});
console.log(twoDigit.format(date)); // "10"

const narrow = new Intl.DateTimeFormat('en-US', {
  month: 'narrow'
});
console.log(narrow.format(date)); // "O"

const short = new Intl.DateTimeFormat('en-US', {
  month: 'short'
});
console.log(short.format(date)); // "Oct"

const long = new Intl.DateTimeFormat('en-US', {
  month: 'long'
});
console.log(long.format(date)); // "October"

Значение numeric отображает месяц числом без ведущих нулей. Значение 2-digit отображает месяц числом с ведущими нулями. Значение narrow выводит одну букву. Значение short выводит сокращённое название месяца. Значение long выводит полное название месяца.

В некоторых языках два месяца могут иметь одинаковый узкий стиль. Например, в английском марте и мае оба начинаются с "M".

Форматирование дня

Опция day отображает день месяца. Она принимает два значения.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  day: 'numeric'
});
console.log(numeric.format(date)); // "15"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  day: '2-digit'
});
console.log(twoDigit.format(date)); // "15"

Значение numeric отображает день без ведущих нулей. Значение 2-digit отображает день с ведущими нулями.

Для однозначных дней numeric выдаёт значения вроде "5", а 2-digit — "05".

Комбинирование нескольких частей даты

Можно указать несколько опций в одном форматтере, чтобы получить нужную комбинацию.

const date = new Date('2024-10-15');

// Month and year only
const monthYear = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});
console.log(monthYear.format(date)); // "October 2024"

// Weekday and day only
const weekdayDay = new Intl.DateTimeFormat('en-US', {
  weekday: 'short',
  day: 'numeric'
});
console.log(weekdayDay.format(date)); // "Tue 15"

// Month and day only
const monthDay = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});
console.log(monthDay.format(date)); // "October 15"

// All components with custom formatting
const custom = new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'short',
  day: '2-digit'
});
console.log(custom.format(date)); // "Tuesday, Oct 15, 2024"

Форматтер автоматически расставляет компоненты в соответствии с правилами локали. Не нужно думать о порядке или знаках препинания.

Как работают опции в разных локалях

Одни и те же опции дают разные результаты в разных локалях. Каждая локаль использует свои правила для порядка и формата отображения частей даты.

const date = new Date('2024-10-15');
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "October 15, 2024"

const de = new Intl.DateTimeFormat('de-DE', options);
console.log(de.format(date)); // "15. Oktober 2024"

const ja = new Intl.DateTimeFormat('ja-JP', options);
console.log(ja.format(date)); // "2024年10月15日"

const ar = new Intl.DateTimeFormat('ar-SA', options);
console.log(ar.format(date)); // "١٥ أكتوبر ٢٠٢٤"

В немецком сначала указывается день и используется точка как разделитель. В японском — порядок год-месяц-день с японскими иероглифами. В арабском — арабский шрифт для названия месяца и чисел.

Названия дней недели и месяцев тоже меняются в зависимости от локали.

const date = new Date('2024-10-15');
const options = {
  weekday: 'long',
  month: 'long'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "Tuesday, October"

const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date)); // "mardi octobre"

const es = new Intl.DateTimeFormat('es-ES', options);
console.log(es.format(date)); // "martes, octubre"

Во французском названия дней недели и месяцев пишутся с маленькой буквы. В испанском тоже используется строчные буквы, но добавляется запятая как разделитель.

Типовые сценарии использования

Отображение месяца и года отлично подходит для дат публикации и архивов.

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});

console.log(`Published: ${formatter.format(date)}`);
// "Published: October 2024"

Показ названий дней недели удобен для календарей и расписаний.

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});

console.log(`Event on ${formatter.format(date)}`);
// "Event on Tuesday"

Показ месяца и дня без года хорошо подходит для дней рождения и ежегодных событий.

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});

console.log(`Birthday: ${formatter.format(date)}`);
// "Birthday: October 15"

Итоги

Объект опций Intl.DateTimeFormat позволяет выводить только нужные части даты вместо полной даты. Опция weekday принимает значения narrow, short или long. Опция year принимает numeric или 2-digit. Опция month принимает numeric, 2-digit, narrow, short или long. Опция day принимает numeric или 2-digit.

Можно комбинировать несколько опций, чтобы показывать только нужные части даты. Форматтер сам расставит порядок и знаки препинания в зависимости от локали. В разных локалях используются свои правила отображения одних и тех же компонентов даты.