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

Stimulus — это легковесный JavaScript-фреймворк, ориентированный на улучшение взаимодействия с HTML через контроллеры и привязку данных. Одной из часто встречающихся задач при работе с веб-приложениями является корректное отображение дат и чисел. Правильное форматирование улучшает читаемость интерфейса и соответствует локализации пользователя.

Работа с датами

Stimulus не предоставляет встроенных средств для форматирования дат, поэтому используется стандартный объект Date и Intl.DateTimeFormat. Основная идея заключается в том, чтобы хранить исходную дату в HTML и преобразовывать её при подключении контроллера.

Пример структуры HTML:

<div data-controller="date" data-date-value="2025-12-26T15:30:00Z">
  <span data-date-target="output"></span>
</div>

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

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["output"];
  static values = {
    date: String
  };

  connect() {
    const date = new Date(this.dateValue);
    const formatted = new Intl.DateTimeFormat("ru-RU", {
      year: "numeric",
      month: "long",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit"
    }).format(date);

    this.outputTarget.textContent = formatted;
  }
}

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

  • static values позволяет задать исходное значение даты через атрибут data-<controller>-<name>-value.
  • Intl.DateTimeFormat обеспечивает локализованное форматирование.
  • Целевая область (target) используется для вывода уже отформатированной даты.

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

Числа могут требовать различного форматирования: денежные значения, проценты, разряды тысяч. Для этого используется Intl.NumberFormat.

HTML-пример для числа:

<div data-controller="number" data-number-value="12345.678">
  <span data-number-target="output"></span>
</div>

Контроллер для чисел:

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["output"];
  static values = {
    number: Number
  };

  connect() {
    const formatted = new Intl.NumberFormat("ru-RU", {
      style: "decimal",
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }).format(this.numberValue);

    this.outputTarget.textContent = formatted;
  }
}

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

  • style: "decimal" для стандартных чисел, "currency" для денежных значений, "percent" для процентов.
  • minimumFractionDigits и maximumFractionDigits контролируют количество десятичных знаков.
  • Локаль (ru-RU) автоматически задаёт разделители тысяч и десятичные разделители в соответствии с правилами региона.

Динамическое обновление данных

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

Пример обновления даты по событию:

updateDate(newDate) {
  const date = new Date(newDate);
  this.outputTarget.textContent = new Intl.DateTimeFormat("ru-RU", {
    year: "numeric",
    month: "long",
    day: "numeric"
  }).format(date);
}

HTML может содержать кнопку для обновления:

<button data-action="click->date#updateDate" data-new-date="2025-12-31T18:00:00Z">
  Обновить дату
</button>

В данном случае метод контроллера получает новое значение и обновляет отображение без перезагрузки страницы.

Масштабирование на сложные сценарии

Для крупных приложений часто создаются утилиты форматирования, которые используются в нескольких контроллерах. Например, можно создать модуль formatters.js:

export function formatDate(dateString, locale = "ru-RU") {
  const date = new Date(dateString);
  return new Intl.DateTimeFormat(locale, {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit"
  }).format(date);
}

export function formatNumber(number, locale = "ru-RU", options = {}) {
  return new Intl.NumberFormat(locale, options).format(number);
}

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

Преимущества использования Stimulus для форматирования

  • Простота интеграции с HTML: форматирование привязано к элементам через data-* атрибуты.
  • Динамическое обновление: легко реагирует на пользовательские действия и события.
  • Совместимость с локалями: Intl позволяет корректно отображать даты и числа для разных регионов.
  • Чистая архитектура: разделение логики отображения и данных упрощает масштабирование приложения.

Stimulus превращает рутинное форматирование дат и чисел в управляемый процесс, который легко расширяется и поддерживается в современных веб-приложениях.

Оглавление