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

Библиотека MUI (Material-UI) предоставляет мощные средства для работы с форматированием чисел и дат, интегрируя возможности JavaScript с компонентами интерфейса. Основная цель — корректное отображение числовых и временных данных в удобочитаемом виде, учитывая локализацию пользователя и требования к стилю отображения.

Локализация и компонент LocalizationProvider

Для корректного форматирования дат и чисел MUI использует компонент LocalizationProvider, который оборачивает дерево компонентов приложения и передает информацию о локали и используемых форматах:

import * as React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} locale={ruLocale}>
      <DatePicker
        label="Выберите дату"
        value={selectedDate}
        onCha nge={(newValue) => setSelectedDate(newValue)}
      />
    </LocalizationProvider>
  );
}

Ключевые моменты:

  • dateAdapter определяет библиотеку для работы с датами (например, date-fns, dayjs, luxon).
  • locale задаёт язык и формат отображения даты.
  • Оборачивание всех компонентов, связанных с датами, гарантирует единый формат отображения и парсинга.

Форматирование дат с помощью DatePicker и DateTimePicker

MUI предоставляет несколько компонентов для работы с датами:

  1. DatePicker — выбор даты.
  2. TimePicker — выбор времени.
  3. DateTimePicker — комбинированный выбор даты и времени.
  4. DesktopDatePicker и MobileDatePicker — адаптивные версии для разных устройств.

Пример использования DateTimePicker с кастомным форматом:

import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { ru } from 'date-fns/locale';

<DateTimePicker
  label="Дата и время"
  value={dateTime}
  onCha nge={(newValue) => setDateTime(newValue)}
  inputFormat="dd.MM.yyyy HH:mm"
  mask="__.__.____ __:__"
/>

Объяснение параметров:

  • inputFormat задаёт формат отображения в поле ввода.
  • mask помогает пользователю вводить данные в правильном формате.
  • Использование локали ru обеспечивает отображение названий месяцев и дней недели на русском языке.

Форматирование чисел с NumberFormat и интеграция с MUI

Для чисел в MUI часто используют библиотеку react-number-format (интеграция с компонентами TextField):

import NumberFormat from 'react-number-format';
import TextField from '@mui/material/TextField';

function NumberFormatCustom(props) {
  const { inputRef, onChange, ...other } = props;

  return (
    <NumberFormat
      {...other}
      getInputRef={inputRef}
      onValueCha nge={(values) => onChange({ target: { value: values.value } })}
      thousandSeparator=" "
      decimalSeparator=","
      isNumericString
      prefix="₽ "
    />
  );
}

<TextField
  label="Сумма"
  value={value}
  onCha nge={(e) => setValue(e.target.value)}
  InputProps={{
    inputComponent: NumberFormatCustom,
  }}
/>

Особенности форматирования чисел:

  • thousandSeparator добавляет разделитель тысяч.
  • decimalSeparator определяет разделитель дробной части.
  • prefix и suffix позволяют добавить валютный символ или единицы измерения.
  • isNumericString гарантирует, что значение будет числом, а не текстом.

Интеграция с компонентами MUI

Форматирование чисел и дат легко объединяется с любыми компонентами MUI:

  • TextField — ввод чисел и дат с кастомным форматом.
  • Table и DataGrid — отображение чисел с форматированием через renderCell.
  • Typography — статический вывод отформатированных данных.

Пример форматирования чисел в DataGrid:

import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'price', headerName: 'Цена', width: 130, 
    valueFormatter: ({ value }) => new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }).format(value) 
  },
];

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

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

MUI рекомендует нативные возможности JavaScript для форматирования:

const number = 1234567.89;
const formattedNumber = new Intl.NumberFormat('ru-RU', {
  style: 'currency',
  currency: 'RUB'
}).format(number);

const date = new Date();
const formattedDate = new Intl.DateTimeFormat('ru-RU', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long'
}).format(date);

Преимущества:

  • Поддержка локализации «из коробки».
  • Совместимость с любыми компонентами MUI.
  • Лёгкость настройки форматов и единиц измерения.

Советы по производительности и удобству

  • Оборачивать весь интерфейс, работающий с датами, в LocalizationProvider.
  • Использовать valueFormatter для DataGrid вместо прямого форматирования в данных.
  • Выносить компоненты форматирования чисел и дат в отдельные reusable-компоненты.
  • Предпочитать нативный Intl для больших приложений, чтобы уменьшить зависимость от сторонних библиотек.

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

Оглавление