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

Библиотека Quasar предоставляет мощные инструменты для форматирования чисел и дат, которые позволяют создавать удобные и локализованные интерфейсы без необходимости подключать сторонние библиотеки. Основные возможности сосредоточены в функциях утилит Quasar.lang и Quasar.utils, а также в специальных компонентах, поддерживающих локализацию.

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

Quasar использует объект Quasar.utils.format для работы с числами. Среди самых полезных методов:

formatNumber

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

Синтаксис:

import { formatNumber } from 'quasar'

formatNumber(value, options)

Параметры options:

  • locale – локаль для форматирования (например, 'ru-RU', 'en-US').
  • decimal – символ десятичного разделителя.
  • thousandsSeparator – символ для разделения тысяч.
  • precision – количество знаков после запятой.
  • prefix – префикс, например знак валюты перед числом.
  • suffix – суффикс, например валютный символ после числа.

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

formatNumber(1234567.89, { locale: 'ru-RU', precision: 2, thousandsSeparator: ' ', decimal: ',' })
// "1 234 567,89"

formatNumber(1234.5, { prefix: '$', precision: 2 })
// "$1234.50"

Метод автоматически учитывает локаль и форматирует числа согласно выбранным настройкам.

formatCurrency

Для работы с денежными суммами Quasar предоставляет более специализированную функцию formatCurrency.

Синтаксис:

import { formatCurrency } from 'quasar'

formatCurrency(value, currency, options)

Параметры:

  • value – число для форматирования.
  • currency – код валюты в формате ISO 4217, например 'USD', 'EUR', 'RUB'.
  • options – объект с настройками отображения, аналогичный formatNumber.

Пример:

formatCurrency(12345.678, 'EUR', { precision: 2 })
// "€12,345.68"

Опция precision позволяет задавать точность до сотых, тысячных и т.д. Опция locale обеспечивает локализацию чисел и валютных символов.

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

Quasar интегрирует поддержку форматирования дат через утилиты date, доступные в Quasar.utils.date. Основной метод — formatDate.

formatDate

Метод преобразует объекты Date или строковые представления даты в удобочитаемые форматы.

Синтаксис:

import { date } from 'quasar'

date.formatDate(value, options)

Параметры:

  • value – дата в формате Date, timestamp или строка ISO.

  • options – объект с настройками форматирования:

    • format – строка формата, например 'YYYY-MM-DD', 'DD.MM.YYYY', 'DD MMMM YYYY'.
    • locale – локаль, например 'ru-RU'.
    • monthNames / dayNames – пользовательские массивы для замены стандартных названий месяцев и дней недели.

Пример:

date.formatDate('2026-03-21', { format: 'DD.MM.YYYY', locale: 'ru-RU' })
// "21.03.2026"

date.formatDate(new Date(), { format: 'DD MMMM YYYY', locale: 'ru-RU' })
// "21 марта 2026"

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

formatDateRelative

Для отображения дат в формате относительного времени (2 дня назад, через 3 часа) используется formatDateRelative.

Пример:

date.formatDateRelative(new Date(Date.now() - 3600 * 1000), { locale: 'ru-RU' })
// "час назад"

Опции locale и units позволяют полностью контролировать форматирование, включая отображение только часов, минут или дней.

Локализация чисел и дат

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

import { Quasar } from 'quasar'
import ru from 'quasar/lang/ru-RU'

Quasar.lang.set(ru)

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

Компоненты с поддержкой форматирования

Некоторые компоненты Quasar уже имеют встроенные возможности форматирования:

  • <q-input type="number"> – автоматическое форматирование чисел с разделителями тысяч и ограничением знаков после запятой.
  • <q-datetime> – визуальный выбор даты и времени с локализованными месяцами и днями недели.
  • <q-table> – встроенные методы форматирования ячеек с числами и датами через слоты body-cell и функции format.

Пример таблицы с форматированными данными:

<q-table
  :rows="rows"
  :columns="columns"
>
  <template v-slot:body-cell(amount)="props">
    {{ formatCurrency(props.row.amount, 'USD') }}
  </template>
  <template v-slot:body-cell(date)="props">
    {{ date.formatDate(props.row.date, { format: 'DD.MM.YYYY', locale: 'ru-RU' }) }}
  </template>
</q-table>

Настройка глобального формата

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

Quasar.config.set({
  framework: {
    date: {
      locale: 'ru-RU',
      format: 'DD.MM.YYYY'
    },
    number: {
      locale: 'ru-RU',
      decimal: ',',
      thousandsSeparator: ' ',
      precision: 2
    }
  }
})

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

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

Оглавление