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

Vuetify предоставляет мощный и гибкий механизм для локализации и форматирования чисел и дат, опираясь на стандарты Intl.NumberFormat и Intl.DateTimeFormat. Это позволяет создавать интерфейсы с корректным отображением данных для различных регионов и валют, без необходимости писать собственные функции форматирования.

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

Vuetify интегрирует форматирование чисел через объект v-number-field и утилиты Vuetify.locale. Основные возможности включают:

  1. Локализованное отображение чисел С помощью свойства locale можно задать конкретную локаль для чисел:

    import { createVuetify } from 'vuetify'

const vuetify = createVuetify({
  locale: {
    current: 'ru-RU',
  },
})

    При использовании числовых компонентов, таких как v-text-field с типом number, числа будут отображаться в формате, соответствующем выбранной локали (1 234,56 для России).

  2. Форматирование валюты Через опции style и currency объект Intl.NumberFormat позволяет выводить суммы с символом валюты:

    <v-text-field
  v-model="amount"
  :formatter="formatCurrency"
  label="Сумма"
></v-text-field>

<script>
export default {
  data: () => ({
    amount: 1234.56,
  }),
  methods: {
    formatCurrency(value) {
      return new Intl.NumberFormat('ru-RU', {
        style: 'currency',
        currency: 'RUB',
      }).format(value)
    },
  },
}
</script>

    В результате 1234.56 отобразится как 1 234,56 ₽.

  3. Настройка количества знаков после запятой Свойства minimumFractionDigits и maximumFractionDigits позволяют контролировать точность:

    new Intl.NumberFormat('ru-RU', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}).format(1234.5) // 1 234,50

  4. Процентное отображение Для отображения чисел как процентов используется стиль percent:

    new Intl.NumberFormat('ru-RU', {
  style: 'percent',
  minimumFractionDigits: 1,
}).format(0.123) // 12,3 %

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

Vuetify поддерживает работу с датами через компоненты v-date-picker и функции локализации. Основной инструмент — объект Intl.DateTimeFormat.

  1. Локализованное отображение даты Для корректного отображения даты в выбранной локали используется:

    const date = new Date(2026, 2, 17) // 17 марта 2026

const formattedDate = new Intl.DateTimeFormat('ru-RU').format(date)
// "17.03.2026"

    v-date-picker автоматически учитывает локаль, если она задана через Vuetify.locale.

  2. Настройка формата даты Параметры weekday, year, month, day, hour, minute, second позволяют полностью контролировать формат:

    new Intl.DateTimeFormat('ru-RU', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
}).format(new Date(2026, 2, 17))
// "вторник, 17 марта 2026 г."

  3. Отображение времени Форматирование времени осуществляется через параметры hour, minute, second и hour12:

    new Intl.DateTimeFormat('ru-RU', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false,
}).format(new Date())
// "14:05:09"

  4. Комбинированные форматы даты и времени Для отображения даты вместе со временем:

    new Intl.DateTimeFormat('ru-RU', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
}).format(new Date())
// "17 марта 2026, 14:05"

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

  1. Настройка глобальной локали Через createVuetify можно задать локаль для всех компонентов:

    import { createVuetify } from 'vuetify'
import ru from 'vuetify/locale/ru'

const vuetify = createVuetify({
  locale: {
    locale: 'ru',
    messages: { ru },
  },
})

  2. Локализация отдельных компонентов Компоненты v-date-picker, v-time-picker и v-calendar поддерживают локальные сообщения через свойства locale и shortcuts. Например:

    <v-date-picker
  v-model="date"
  locale="ru"
></v-date-picker>

  3. Динамическая смена локали Через объект vuetify.framework.locale.current можно менять язык в рантайме:

    vuetify.framework.locale.current = 'en'

    После этого все числовые и датовые компоненты автоматически перейдут на английскую локаль.

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

  • Всегда использовать Intl.NumberFormat и Intl.DateTimeFormat вместо самописных функций форматирования, это исключает ошибки при смене локали.

  • Для финансовых приложений задавать currency и фиксированное количество знаков после запятой.

  • При работе с датами учитывать временные зоны (timeZone) в параметрах Intl.DateTimeFormat, особенно для международных проектов:

    new Intl.DateTimeFormat('ru-RU', { timeZone: 'Europe/Moscow' })

  • Для сложных интерфейсов с таблицами и отчетами использовать комбинированное форматирование через функции-форматтеры в v-data-table:

    <v-data-table :items="items">
  <template v-slot:item.amount="{ item }">
    {{ formatCurrency(item.amount) }}
  </template>
  <template v-slot:item.date="{ item }">
    {{ formatDate(item.date) }}
  </template>
</v-data-table>

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

Оглавление