Полный список параметров

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

Базовые параметры и поведение

altInput

Создаёт альтернативное текстовое поле для отображения отформатированной даты.

  • Тип: boolean
  • По умолчанию: false

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

altFormat

Формат отображения даты в альтернативном поле.

  • Тип: string
  • По умолчанию: "F j, Y"

Пример:

  • "d.m.Y"
  • "Y-m-d"

dateFormat

Основной формат даты, используемый для хранения значения.

  • Тип: string
  • По умолчанию: "Y-m-d"

От этого параметра зависит, как значение будет отправляться на сервер.

defaultDate

Начальная дата или массив дат.

  • Тип: Date | string | Array
  • По умолчанию: null

Поддерживает:

  • одиночную дату
  • диапазон дат
  • множественный выбор

inline

Встраивает календарь прямо в DOM без всплывающего окна.

  • Тип: boolean
  • По умолчанию: false

static

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

  • Тип: boolean
  • По умолчанию: false

Ограничения выбора дат

minDate

Минимально допустимая дата.

  • Тип: Date | string
  • По умолчанию: null

maxDate

Максимально допустимая дата.

  • Тип: Date | string
  • По умолчанию: null

enable

Список разрешённых дат.

  • Тип: Array<Date | string>
  • По умолчанию: null

Используется для whitelist-подхода.

disable

Список запрещённых дат.

  • Тип: Array<Date | string>
  • По умолчанию: null

Поддерживает:

  • конкретные даты
  • диапазоны
  • функции-валидаторы

disableMobile

Отключает нативный мобильный датапикер.

  • Тип: boolean
  • По умолчанию: false

Режимы выбора

mode

Определяет режим работы календаря.

  • Тип: string

  • Возможные значения:

    • "single"
    • "multiple"
    • "range"

conjunction

Разделитель для множественного выбора.

  • Тип: string
  • По умолчанию: ", "

maxDate

(повторно важный параметр в контексте режима range)

Используется как верхняя граница диапазона.

showMonths

Количество отображаемых месяцев одновременно.

  • Тип: number
  • По умолчанию: 1

monthSelectorType

Тип выбора месяца.

  • Тип: string

  • Возможные значения:

    • "dropdown"
    • "static"

Время и часы

enableTime

Включает выбор времени.

  • Тип: boolean
  • По умолчанию: false

noCalendar

Отключает календарь, оставляя только выбор времени.

  • Тип: boolean
  • По умолчанию: false

time_24hr

24-часовой формат времени.

  • Тип: boolean
  • По умолчанию: false

enableSeconds

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

  • Тип: boolean
  • По умолчанию: false

defaultHour

Час по умолчанию.

  • Тип: number
  • По умолчанию: 12

defaultMinute

Минуты по умолчанию.

  • Тип: number
  • По умолчанию: 0

defaultSeconds

Секунды по умолчанию.

  • Тип: number
  • По умолчанию: 0

timeIncrement

Шаг изменения времени.

  • Тип: number
  • По умолчанию: 5

Навигация и интерфейс

weekNumbers

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

  • Тип: boolean
  • По умолчанию: false

weekAbbreviation

Сокращение для недель.

  • Тип: string
  • По умолчанию: "Wk"

shorthandCurrentMonth

Сокращённое отображение текущего месяца.

  • Тип: boolean
  • По умолчанию: false

showMonths

Количество месяцев в интерфейсе.

  • Тип: number
  • По умолчанию: 1

position

Позиционирование календаря относительно input.

  • Тип: string

  • Возможные значения:

    • "auto"
    • "above"
    • "below"
    • "auto left"
    • "auto right"

animate

Включает анимацию открытия календаря.

  • Тип: boolean
  • По умолчанию: true

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

locale

Локализация интерфейса.

  • Тип: object | string
  • По умолчанию: "default"

Поддерживает:

  • встроенные локали
  • кастомные словари

altFormat

Альтернативный формат отображения даты.

ariaDateFormat

Формат для accessibility-атрибутов.

  • Тип: string
  • По умолчанию: "F j, Y"

Поведение при выборе

closeOnSelect

Закрытие календаря после выбора даты.

  • Тип: boolean
  • По умолчанию: true

allowInput

Разрешает ручной ввод даты.

  • Тип: boolean
  • По умолчанию: false

clickOpens

Открытие календаря по клику на input.

  • Тип: boolean
  • По умолчанию: true

wrap

Используется при инициализации через обёртку.

  • Тип: boolean
  • По умолчанию: false

Множественные и диапазонные режимы

mode: "multiple"

Позволяет выбирать несколько отдельных дат.

Дополнительное поведение:

  • значения объединяются в массив
  • используется conjunction

mode: "range"

Позволяет выбирать интервал дат.

Особенности:

  • первая дата — начало
  • вторая — конец
  • третья — сбрасывает выбор

Парсинг и форматирование данных

parseDate

Функция кастомного парсинга даты.

  • Тип: (dateString: string, format: string) => Date

Позволяет переопределить стандартный разбор строк.

formatDate

Функция форматирования даты.

  • Тип: (date: Date, format: string) => string

Обработка событий

onChange

Срабатывает при изменении значения.

  • Тип: (selectedDates, dateStr, instance) => void

onOpen

Срабатывает при открытии календаря.

onClose

Срабатывает при закрытии календаря.

onMonthChange

Вызывается при смене месяца.

onYearChange

Вызывается при смене года.

onReady

Срабатывает после инициализации.

Дополнительные параметры поведения

utc

Использование UTC времени.

  • Тип: boolean
  • По умолчанию: false

plugins

Подключение расширений Flatpickr.

  • Тип: Array

Примеры плагинов:

  • диапазоны
  • мобильные улучшения
  • кастомные UI-расширения

appendTo

Указывает контейнер для рендера календаря.

  • Тип: HTMLElement

wrap

Активирует режим работы с обёрнутыми элементами.

altInputClass

Класс альтернативного input.

  • Тип: string

conjunction

Строка объединения дат в множественном режиме.

Поведение при фокусе и вводе

allowInput

Позволяет редактировать значение вручную.

clickOpens

Открывает календарь при клике.

tabIndex

Устанавливает порядок фокусировки.

  • Тип: number

Управление временем выполнения

nextArrow

HTML для стрелки “вперёд”.

  • Тип: string

prevArrow

HTML для стрелки “назад”.

  • Тип: string

Служебные параметры

id

Идентификатор экземпляра.

  • Тип: string | number

defaultHour, defaultMinute, defaultSeconds

Используются как fallback при отсутствии времени.

Взаимодействие с формами

name

Имя input-поля.

static

Фиксированное размещение без всплытия.

altInput

Разделение отображения и данных формы.

Параметры производительности и UX

disableMobile

Принудительное использование кастомного UI вместо нативного.

animate

Управление плавностью интерфейса.

shorthandCurrentMonth

Сокращает визуальную нагрузку интерфейса.

Итоговая структура параметров

Flatpickr конфигурация логически делится на блоки:

  • форматирование и отображение
  • ограничения выбора
  • режимы выбора
  • время и дата
  • интерфейс и UX
  • локализация
  • события
  • расширения и плагины
  • интеграция с формами

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

Оглавление