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

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

В экосистеме Ant Design форматирование дат и чисел реализуется за счёт комбинации встроенных компонентов интерфейса, систем локализации и внешних библиотек.

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

Компоненты Ant Design, работающие с датами, используют специализированные библиотеки для обработки временных значений. В современных версиях Ant Design по умолчанию применяется библиотека Day.js, которая пришла на смену Moment.js.

Day.js обеспечивает:

  • работу с датами и временем
  • форматирование строковых представлений
  • парсинг дат
  • локализацию
  • операции сравнения и вычисления

Основные шаблоны форматирования

Форматирование даты осуществляется при помощи шаблонов. Каждый символ шаблона соответствует определённой части даты.

Наиболее распространённые шаблоны:

Шаблон Значение Пример
YYYY год 2026
YY короткий год 26
MM номер месяца 03
MMM сокращённое название месяца Mar
MMMM полное название месяца March
DD день месяца 14
HH часы (24) 18
hh часы (12) 06
mm минуты 45
ss секунды 09

Пример форматирования:

import dayjs from "dayjs"

const formatted = dayjs().format("YYYY-MM-DD")

Результат:

2026-03-14

Использование форматирования в DatePicker

Компонент DatePicker поддерживает настройку формата отображения даты через свойство format.

import { DatePicker } from "antd"

<DatePicker format="DD.MM.YYYY" />

В интерфейсе значение будет отображаться следующим образом:

14.03.2026

Это свойство влияет только на представление даты, но внутренне компонент продолжает работать с объектом Day.js.

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

Для отображения времени используется компонент DatePicker с параметром showTime.

<DatePicker
  showTime
  format="DD.MM.YYYY HH:mm"
/>

Пример отображения:

14.03.2026 18:45

Использование TimePicker

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

import { TimePicker } from "antd"

<TimePicker format="HH:mm:ss" />

Пример результата:

18:45:09

Можно использовать укороченные форматы:

<TimePicker format="HH:mm" />

Получение отформатированного значения

После выбора даты компонент возвращает объект Day.js. Для получения строки используется метод format.

const handleChange = (date) => {
  const value = date.format("YYYY-MM-DD")
  console.log(value)
}

Пример результата:

2026-03-14

Локализация формата дат

Формат отображения дат зависит от локали. Ant Design поддерживает систему локализации через компонент ConfigProvider.

import { ConfigProvider } from "antd"
import ruRU from "antd/locale/ru_RU"

<ConfigProvider locale={ruRU}>
  <DatePicker />
</ConfigProvider>

После установки русской локали:

  • названия месяцев отображаются на русском
  • формат даты соответствует региональным стандартам
  • элементы календаря переводятся автоматически

Использование RangePicker

Компонент RangePicker позволяет выбирать диапазон дат.

import { DatePicker } from "antd"

const { RangePicker } = DatePicker

<RangePicker format="DD.MM.YYYY" />

Результат выбора:

01.03.2026 — 14.03.2026

Полученные значения представляют собой массив объектов Day.js.

Кастомное отображение дат

Иногда требуется отображать дату в нестандартном виде, например:

14 марта 2026

Реализация:

dayjs().format("D MMMM YYYY")

Для корректного отображения требуется подключение локали:

import "dayjs/locale/ru"

dayjs.locale("ru")

Форматирование чисел

Числовые значения в пользовательских интерфейсах требуют:

  • разделения тысяч
  • контроля количества десятичных знаков
  • корректного отображения валют
  • локализации

Ant Design предоставляет несколько инструментов для форматирования чисел.

Компонент InputNumber

InputNumber — основной компонент для ввода и отображения числовых значений.

import { InputNumber } from "antd"

<InputNumber min={0} max={100} />

Компонент автоматически:

  • ограничивает диапазон
  • предотвращает ввод недопустимых значений
  • обеспечивает удобное изменение числа

Настройка точности

Свойство precision задаёт количество знаков после запятой.

<InputNumber precision={2} />

Пример значения:

15.34

Форматирование с разделителями тысяч

Для улучшения читаемости больших чисел используется свойство formatter.

<InputNumber
  formatter={(value) =>
    `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  }
/>

Результат:

1000000 → 1,000,000

Парсинг значения

Если используется formatter, необходимо также определить parser, который удаляет форматирование перед обработкой значения.

<InputNumber
  formatter={(value) =>
    `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  }
  parser={(value) =>
    value.replace(/,/g, "")
  }
/>

Это позволяет корректно преобразовать строку обратно в число.

Форматирование валюты

Для отображения валютных значений используется сочетание formatter и parser.

<InputNumber
  formatter={(value) => `$ ${value}`}
  parser={(value) => value.replace(/\$\s?|(,*)/g, "")}
/>

Результат:

$ 1500

Использование Intl.NumberFormat

Современный стандарт JavaScript для форматирования чисел — API Intl.NumberFormat.

Пример форматирования:

const formatter = new Intl.NumberFormat("ru-RU")

formatter.format(1000000)

Результат:

1 000 000

Форматирование валют

const currency = new Intl.NumberFormat("ru-RU", {
  style: "currency",
  currency: "RUB"
})

currency.format(2500)

Результат:

2 500 ₽

Использование в таблицах Ant Design

Часто числа отображаются внутри компонента Table.

Форматирование выполняется через функцию render.

const columns = [
  {
    title: "Цена",
    dataIndex: "price",
    render: (value) =>
      new Intl.NumberFormat("ru-RU", {
        style: "currency",
        currency: "RUB"
      }).format(value)
  }
]

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

Форматирование процентов

Процентные значения также можно форматировать через Intl.NumberFormat.

const percent = new Intl.NumberFormat("ru-RU", {
  style: "percent",
  minimumFractionDigits: 2
})

percent.format(0.45)

Результат:

45,00 %

Ограничение ввода чисел

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

<InputNumber
  min={0}
  max={1000}
/>

Дополнительно можно задать шаг изменения.

<InputNumber step={0.5} />

Каждое нажатие кнопок увеличения или уменьшения изменяет значение на указанную величину.

Форматирование при отображении данных

При выводе чисел вне элементов ввода рекомендуется использовать централизованные функции форматирования.

Пример утилиты:

export const formatNumber = (value) => {
  return new Intl.NumberFormat("ru-RU").format(value)
}

Использование:

formatNumber(1200000)

Результат:

1 200 000

Универсальная функция форматирования

Для повторного использования можно создать универсальный форматтер.

export const formatCurrency = (value) => {
  return new Intl.NumberFormat("ru-RU", {
    style: "currency",
    currency: "RUB"
  }).format(value)
}

Пример использования:

formatCurrency(5500)

Результат:

5 500 ₽

Комбинирование форматирования в интерфейсах

Чаще всего форматирование дат и чисел используется совместно в таблицах, карточках и формах.

Пример колонок таблицы:

const columns = [
  {
    title: "Дата",
    dataIndex: "date",
    render: (value) => dayjs(value).format("DD.MM.YYYY")
  },
  {
    title: "Сумма",
    dataIndex: "amount",
    render: (value) =>
      new Intl.NumberFormat("ru-RU", {
        style: "currency",
        currency: "RUB"
      }).format(value)
  }
]

В интерфейсе это будет выглядеть следующим образом:

Дата Сумма
14.03.2026 5 000 ₽

Практические рекомендации

Единый формат дат

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

DD.MM.YYYY

Это предотвращает путаницу между форматами:

03/04/2026

которые могут интерпретироваться по-разному.

Централизованные функции форматирования

Форматирование лучше выносить в отдельные утилиты:

utils/formatDate.js  
utils/formatCurrency.js

Это:

  • снижает дублирование кода
  • упрощает изменение формата
  • повышает поддерживаемость проекта

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

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

Дата:

14.03.2026

Английская локаль:

03/14/2026

Числа:

1 000 000

или

1,000,000

Отделение логики от представления

Внутри бизнес-логики рекомендуется хранить:

  • ISO-формат дат (2026-03-14)
  • обычные числовые значения

Форматирование должно выполняться только на уровне интерфейса.

Оглавление