Пользовательские форматы

Пользовательские форматы в Flatpickr позволяют полностью контролировать внешний вид даты и времени, отображаемых в поле ввода, альтернативном поле, заголовках календаря и других элементах интерфейса. Вместо использования стандартных представлений даты можно определить собственный шаблон, состоящий из специальных токенов.

Механизм форматирования применяется в нескольких ключевых параметрах:

  • dateFormat
  • altFormat
  • пользовательские функции форматирования
  • пользовательские функции парсинга
  • программное преобразование дат через методы библиотеки

Пример настройки собственного формата:

flatpickr("#date", {
    dateFormat: "d.m.Y"
});

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

31.12.2025

Зачем нужны пользовательские форматы

Различные проекты предъявляют разные требования к отображению даты.

Типичные сценарии:

  • локальные форматы разных стран;
  • корпоративные стандарты оформления;
  • интеграция с API;
  • работа с базами данных;
  • отображение времени для пользователей;
  • экспорт данных в отчёты.

Например, пользователю может отображаться:

31 декабря 2025

а сервер получать:

2025-12-31

Такое разделение реализуется средствами пользовательских форматов.

Основной параметр dateFormat

Параметр dateFormat определяет строку, которая записывается в исходное поле ввода.

Пример:

flatpickr("#date", {
    dateFormat: "Y-m-d"
});

Результат:

2025-12-31

Другой вариант:

flatpickr("#date", {
    dateFormat: "d/m/Y"
});

Результат:

31/12/2025

Формат состоит из токенов, каждый из которых отвечает за отдельную часть даты или времени.

Пользовательский формат для дня, месяца и года

Наиболее часто используются следующие токены:

Токен Значение Пример
d день с ведущим нулём 05
j день без нуля 5
m месяц с нулём 08
n месяц без нуля 8
Y полный год 2025
y короткий год 25

Пример:

flatpickr("#date", {
    dateFormat: "d.m.Y"
});

Результат:

05.08.2025

Другой вариант:

flatpickr("#date", {
    dateFormat: "j.n.y"
});

Результат:

5.8.25

Форматы с текстовыми названиями месяцев

Flatpickr поддерживает отображение названий месяцев в текстовом виде.

Основные токены:

Токен Значение
F полное название месяца
M сокращённое название месяца

Пример:

flatpickr("#date", {
    dateFormat: "d F Y"
});

Результат:

31 December 2025

Сокращённый вариант:

flatpickr("#date", {
    dateFormat: "d M Y"
});

Результат:

31 Dec 2025

При подключении локализации названия автоматически переводятся.

Отображение дня недели

Для отображения дня недели используются специальные токены.

Токен Значение
D сокращённое название дня
l полное название дня

Пример:

flatpickr("#date", {
    dateFormat: "l, d F Y"
});

Результат:

Wednesday, 31 December 2025

Сокращённая запись:

flatpickr("#date", {
    dateFormat: "D, d M"
});

Результат:

Wed, 31 Dec

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

Для времени предусмотрен собственный набор токенов.

Токен Значение
H часы 00–23
G часы 0–23
h часы 01–12
i минуты
S секунды
K AM/PM

Пример:

flatpickr("#time", {
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i"
});

Результат:

18:45

Формат с секундами:

flatpickr("#time", {
    enableTime: true,
    enableSeconds: true,
    noCalendar: true,
    dateFormat: "H:i:S"
});

Результат:

18:45:30

Форматы для 12-часового времени

Flatpickr поддерживает американский формат времени.

Пример:

flatpickr("#time", {
    enableTime: true,
    noCalendar: true,
    time_24hr: false,
    dateFormat: "h:i K"
});

Результат:

06:45 PM

Утреннее время:

09:15 AM

Вечернее время:

08:20 PM

Комбинирование даты и времени

Формат может одновременно содержать дату и время.

Пример:

flatpickr("#datetime", {
    enableTime: true,
    dateFormat: "Y-m-d H:i"
});

Результат:

2025-12-31 18:45

Другой вариант:

flatpickr("#datetime", {
    enableTime: true,
    dateFormat: "d.m.Y H:i:S"
});

Результат:

31.12.2025 18:45:30

Использование разделителей

Токены могут разделяться любыми символами.

Пример:

dateFormat: "Y/m/d"

Результат:

2025/12/31

Пример:

dateFormat: "d-m-Y"

Результат:

31-12-2025

Пример:

dateFormat: "d | m | Y"

Результат:

31 | 12 | 2025

Flatpickr воспринимает любые символы между токенами как обычный текст.

Экранирование символов

Иногда необходимо вывести символ, совпадающий с названием токена.

Для этого используется обратный слэш.

Пример:

dateFormat: "\\D d.m.Y"

Результат:

D 31.12.2025

Другой пример:

dateFormat: "Y\\y"

Результат:

2025y

Экранирование особенно полезно при формировании нестандартных строк.

Пользовательское отображение через altInput

Очень распространённый сценарий — разные форматы для пользователя и сервера.

Пример:

flatpickr("#date", {
    altInput: true,
    dateFormat: "Y-m-d",
    altFormat: "d F Y"
});

Пользователь видит:

31 December 2025

В поле формы отправляется:

2025-12-31

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

Использование formatDate

Flatpickr предоставляет встроенный метод форматирования даты.

Пример:

const fp = flatpickr("#date");

const result = fp.formatDate(
    new Date(),
    "Y-m-d"
);

console.log(result);

Результат:

2025-12-31

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

Создание полностью пользовательского форматирования

Вместо строковых шаблонов можно использовать функцию.

Пример:

flatpickr("#date", {
    formatDate(date) {
        return `Год: ${date.getFullYear()}`;
    }
});

Результат:

Год: 2025

Более сложный пример:

flatpickr("#date", {
    formatDate(date) {
        return `${date.getDate()} день месяца`;
    }
});

Результат:

31 день месяца

Такой подход снимает ограничения встроенных токенов.

Пользовательский разбор форматов через parseDate

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

Пример:

flatpickr("#date", {
    parseDate(dateString) {
        const [day, month, year] =
            dateString.split(".");

        return new Date(year, month - 1, day);
    }
});

Для строки:

31.12.2025

будет создан объект:

new Date(2025, 11, 31)

Форматы для интеграции с сервером

Наиболее популярные варианты:

Формат SQL:

dateFormat: "Y-m-d"

Результат:

2025-12-31

Дата и время SQL:

dateFormat: "Y-m-d H:i:S"

Результат:

2025-12-31 18:45:30

Компактный формат:

dateFormat: "Ymd"

Результат:

20251231

Формат для логов:

dateFormat: "Y-m-d_H-i-S"

Результат:

2025-12-31_18-45-30

Распространённые ошибки при работе с пользовательскими форматами

Путаница между Y и y

Неверно:

dateFormat: "d.m.y"

Результат:

31.12.25

Если нужен полный год:

dateFormat: "d.m.Y"

Результат:

31.12.2025

Путаница между m и i

Токен m обозначает месяц.

Токен i обозначает минуты.

Ошибка:

dateFormat: "H:m"

Результат:

18:12

где 12 — месяц, а не минуты.

Правильно:

dateFormat: "H:i"

Результат:

18:45

Использование времени без enableTime

Неверно:

flatpickr("#date", {
    dateFormat: "Y-m-d H:i"
});

Время не будет доступно для выбора.

Правильно:

flatpickr("#date", {
    enableTime: true,
    dateFormat: "Y-m-d H:i"
});

Практические шаблоны пользовательских форматов

Европейский формат:

"d.m.Y"

Результат:

31.12.2025

Американский формат:

"m/d/Y"

Результат:

12/31/2025

Полная дата:

"l, d F Y"

Результат:

Wednesday, 31 December 2025

Дата и время:

"Y-m-d H:i"

Результат:

2025-12-31 18:45

Короткая дата:

"d M"

Результат:

31 Dec

Формат для журналов событий:

"Y-m-d H:i:S"

Результат:

2025-12-31 18:45:30

Пользовательские форматы являются одним из самых гибких механизмов Flatpickr. Благодаря сочетанию токенов, альтернативных форматов, функций formatDate и parseDate библиотека позволяет формировать практически любой вариант отображения даты и времени — от стандартных локализованных представлений до специализированных корпоративных и серверных форматов.

Оглавление