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

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

В SweetAlert 2 для числовых значений доступно несколько способов их отображения. Это может быть полезно, например, при отображении больших чисел с разделением на тысячи или при форматировании валюты.

Разделение тысяч

Чтобы правильно отображать числовые значения с разделителями тысяч, можно использовать встроенные функции JavaScript. Например, метод toLocaleString() позволяет легко форматировать числа с разделением тысяч в зависимости от локали.

Пример:

let number = 1234567.89;
let formattedNumber = number.toLocaleString('ru-RU');
Swal.fire({
  title: 'Отформатированное число',
  text: formattedNumber,
  icon: 'info'
});

В этом примере число 1234567.89 будет отображаться как 1 234 567,89 для русской локали.

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

Для валюты SweetAlert можно использовать числовые методы JavaScript, чтобы добавить символы валюты или изменить количество знаков после запятой. Один из способов — это использование метода Intl.NumberFormat().

Пример:

let price = 9999.99;
let formattedPrice = new Intl.NumberFormat('ru-RU', {
  style: 'currency',
  currency: 'RUB'
}).format(price);

Swal.fire({
  title: 'Цена',
  text: formattedPrice,
  icon: 'success'
});

Этот код отобразит цену как ₽9 999,99 в зависимости от локали.

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

Работа с датами в SweetAlert также важна для создания информативных и понятных уведомлений. В JavaScript для форматирования дат часто используют сторонние библиотеки, такие как Moment.js или Date-fns, но можно обойтись и стандартными средствами языка.

Стандартное форматирование дат

Для того чтобы отформатировать дату в JavaScript, можно воспользоваться методами объекта Date. Например, чтобы получить формат даты в стиле ДД.ММ.ГГГГ, можно сделать следующее:

Пример:

let date = new Date();
let formattedDate = date.getDate().toString().padStart(2, '0') + '.' + (date.getMonth() + 1).toString().padStart(2, '0') + '.' + date.getFullYear();

Swal.fire({
  title: 'Текущая дата',
  text: formattedDate,
  icon: 'info'
});

Здесь используется метод padStart(), который добавляет ведущие нули, чтобы формат был всегда двухзначным.

Использование сторонних библиотек

Для более сложного форматирования дат рекомендуется использовать такие библиотеки как Moment.js или Date-fns, которые предлагают большое количество функций для работы с датами и временем. Например, с Moment.js форматирование будет выглядеть так:

Пример с Moment.js:

let momentDate = moment().format('DD.MM.YYYY');
Swal.fire({
  title: 'Текущая дата (Moment.js)',
  text: momentDate,
  icon: 'info'
});

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

Персонализация формата с учётом локалей

SweetAlert автоматически определяет локаль пользователя, если указать её в параметрах окна. Это полезно, например, при разработке международных приложений, где важно учитывать культурные особенности отображения дат и чисел. В таком случае необходимо позаботиться о том, чтобы формат отображения числа или даты соответствовал стандартам конкретной страны.

Пример:

let number = 1234567.89;
let formattedNumber = number.toLocaleString('de-DE'); // Для Германии
Swal.fire({
  title: 'Отформатированное число (Германия)',
  text: formattedNumber,
  icon: 'info'
});

Для Германии число будет отображаться как 1.234.567,89, а для США — как 1,234,567.89. Подобные различия могут возникать также в форматах дат, что особенно важно для международных приложений.

Автоматическое обновление значений

При использовании динамических данных в SweetAlert (например, когда данные могут обновляться в реальном времени) важно, чтобы значения чисел и дат автоматически обновлялись в соответствующем формате. Для этого можно создавать функцию, которая будет обновлять значение в модальном окне.

Пример:

let updateDate = function() {
  let currentDate = new Date();
  let formattedDate = currentDate.getDate().toString().padStart(2, '0') + '.' + (currentDate.getMonth() + 1).toString().padStart(2, '0') + '.' + currentDate.getFullYear();
  
  Swal.fire({
    title: 'Обновлённая дата',
    text: formattedDate,
    icon: 'info'
  });
};

// Вызов обновления через 3 секунды
setTimeout(updateDate, 3000);

Такой подход полезен, например, при реализации таймера или обновления данных в реальном времени.

Резюме

Форматирование чисел и дат в SweetAlert предоставляет широкие возможности для настройки отображения данных в модальных окнах. Применение стандартных методов JavaScript и сторонних библиотек, таких как Moment.js или Date-fns, позволяет эффективно управлять форматами чисел и дат в зависимости от локали, валюты и других условий.

Оглавление