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

Введение

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

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

Понимание компонентов даты

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

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

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

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

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

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

const narrow = new Intl.DateTimeFormat('ru-RU', {
  weekday: 'narrow'
});
console.log(narrow.format(date)); // "В"

const short = new Intl.DateTimeFormat('ru-RU', {
  weekday: 'short'
});
console.log(short.format(date)); // "Вт"

const long = new Intl.DateTimeFormat('ru-RU', {
  weekday: 'long'
});
console.log(long.format(date)); // "вторник"

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

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

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

Опция 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');

// Только месяц и год
const monthYear = new Intl.DateTimeFormat('ru-RU', {
  year: 'numeric',
  month: 'long'
});
console.log(monthYear.format(date)); // "октябрь 2024 г."

// Только день недели и день
const weekdayDay = new Intl.DateTimeFormat('ru-RU', {
  weekday: 'short',
  day: 'numeric'
});
console.log(weekdayDay.format(date)); // "вт 15"

// Только месяц и день
const monthDay = new Intl.DateTimeFormat('ru-RU', {
  month: 'long',
  day: 'numeric'
});
console.log(monthDay.format(date)); // "15 октября"

// Все компоненты с пользовательским форматированием
const custom = new Intl.DateTimeFormat('ru-RU', {
  weekday: 'long',
  year: 'numeric',
  month: 'short',
  day: '2-digit'
});
console.log(custom.format(date)); // "вторник, 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('ru-RU', {
  year: 'numeric',
  month: 'long'
});

console.log(`Опубликовано: ${formatter.format(date)}`);
// "Опубликовано: октябрь 2024 г."

Отображение названий дней недели хорошо подходит для календарей и расписаний.

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

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

console.log(`Событие во ${formatter.format(date)}`);
// "Событие во вторник"

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

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

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

console.log(`День рождения: ${formatter.format(date)}`);
// "День рождения: 15 октября"

Резюме

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

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