Форматы дат

Naive UI предоставляет удобные инструменты для отображения и форматирования дат в компонентах интерфейса. Важным аспектом является использование форматирования через date-fns или встроенные утилиты, которые позволяют адаптировать вывод дат под нужный локаль и стиль отображения.

Настройка локали

Для корректного форматирования дат необходимо определить локаль. Naive UI использует стандартные объекты Intl.DateTimeFormat и может интегрироваться с date-fns для более гибкой работы:

import { createDiscreteApi } from 'naive-ui';
import { format } from 'date-fns';
import { ru } from 'date-fns/locale';

const now = new Date();
const formattedDate = format(now, "dd MMMM yyyy", { locale: ru });
console.log(formattedDate); // "19 марта 2026"

Ключевой момент — указание объекта локали через locale. Это позволяет корректно отображать месяцы, дни недели и другие элементы даты на нужном языке.

Использование компонента NDatePicker

NDatePicker позволяет пользователю выбирать дату и отображает её в нужном формате. Основные свойства, влияющие на формат даты:

  • value: текущее выбранное значение даты.
  • format: строка формата даты.
  • valueFormat: формат значения для хранения в состоянии.
  • type: тип выбора даты (date, datetime, month, year).

Пример:

Здесь format отвечает за отображение в компоненте, а value-format — за формат хранения в переменной.

Строковые шаблоны формата

Naive UI поддерживает стандартные символы формата, аналогичные date-fns:

Символ Описание Пример
yyyy Полный год 2026
yy Две последние цифры года 26
MM Месяц с ведущим нулем 03
dd День месяца с ведущим нулем 19
HH Часы в 24-часовом формате 15
mm Минуты 07
ss Секунды 45
MMMM Полное название месяца Март
EEE Короткое название дня недели чт

Эти шаблоны можно комбинировать для формирования любых пользовательских форматов отображения.

Локализация через NDatePicker

Для интеграции с локалью используется свойство locale:

import { dateZhCN } from 'naive-ui';

Naive UI предоставляет встроенные локали для основных языков (enUS, zhCN, ruRU и др.), что упрощает настройку интерфейса.

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

NCalendar поддерживает отображение дат в виде сетки с возможностью кастомизации:

  • day-format: формат отображения дня.
  • title-format: формат заголовка месяца.
  • first-day-of-week: задаёт первый день недели (0 — воскресенье, 1 — понедельник).

Пример:

Это позволяет согласовать отображение календаря с локальными стандартами и пользовательскими требованиями.

Преобразование дат для хранения и отображения

В Naive UI часто используется разделение форматов:

  • valueFormat — формат для внутреннего хранения (например, в состоянии Vue или в базе данных).
  • format — формат для отображения пользователю.

Такое разделение упрощает работу с данными и предотвращает ошибки при конвертации между строкой и объектом даты:

dbDate будет храниться в стандарте ISO (yyyy-MM-dd), но отображаться в привычном для пользователя виде.

Динамическое изменение формата

Можно менять формат даты в зависимости от условий, например, от режима приложения:

isShortFormat позволяет переключать отображение между коротким и длинным стилем.

Совместное использование с date-fns

Naive UI позволяет комбинировать компоненты с библиотекой date-fns для сложного форматирования:

import { formatDistanceToNow } from 'date-fns';
import { ru } from 'date-fns/locale';

const relativeTime = formatDistanceToNow(new Date('2026-03-01'), { locale: ru });
console.log(relativeTime); // "18 дней назад"

Такой подход полезен для отображения относительного времени или кастомных форматов, которые не поддерживаются напрямую компонентами Naive UI.

Поддержка часовых поясов

Naive UI не управляет часовыми поясами напрямую, поэтому для работы с разными часовыми поясами рекомендуется использовать date-fns-tz:

import { zonedTimeToUtc, utcToZonedTime, format } from 'date-fns-tz';

const timeZone = 'Europe/Moscow';
const date = new Date();
const zonedDate = utcToZonedTime(date, timeZone);
const formatted = format(zonedDate, 'dd.MM.yyyy HH:mm zzz', { timeZone });
console.log(formatted); // "19.03.2026 18:00 MSK"

Это гарантирует корректное отображение времени в нужной зоне при использовании компонентов Naive UI.

Оглавление