Возвращаемые значения

Возвращаемые значения в Flatpickr формируются на нескольких уровнях: через API-инстанс, через колбэки событий, через методы преобразования дат и через состояние самого инпута. Тип возвращаемых данных зависит от режима работы календаря, конфигурации формата и выбранных опций, таких как mode, dateFormat, enableTime, altInput.

Внутреннее представление даты в Flatpickr почти всегда строится вокруг объекта Date. Это ключевой момент архитектуры библиотеки.

Основные формы представления:

  • Date — основной тип внутри инстанса
  • string — форматированное значение для input
  • number — timestamp (в отдельных методах и преобразованиях)
  • Array<Date> — при множественном выборе

При этом UI-слой и API-слой строго разделены: пользователь взаимодействует со строками, а библиотека оперирует объектами Date.

Значение, возвращаемое при инициализации

Инициализация календаря возвращает экземпляр Flatpickr:

const fp = flatpickr("#input", {
  dateFormat: "Y-m-d"
});

fp — это объект-инстанс, содержащий полный набор методов управления и состояния.

Основные поля инстанса:

  • fp.selectedDates — массив выбранных дат
  • fp.currentYear, fp.currentMonth — текущее отображение
  • fp.config — конфигурация
  • fp.input — DOM-элемент input
  • fp.calendarContainer — DOM-контейнер календаря

selectedDates как основное возвращаемое значение

selectedDates — центральный источник данных о выборе.

Структура:

fp.selectedDates // Array<Date>

Примеры поведения:

Одиночный режим (default)

[
  Date("2026-06-01T00:00:00")
]

Массив всегда содержит либо 0, либо 1 элемент.

Режим multiple

[
  Date("2026-06-01"),
  Date("2026-06-10"),
  Date("2026-06-20")
]

Режим range

[
  Date("2026-06-01"),
  Date("2026-06-15")
]

Первый элемент — начало диапазона, второй — конец.

Возвращаемое значение через onChange

Колбэк onChange является одним из основных источников получения данных.

flatpickr("#input", {
  onChange: function(selectedDates, dateStr, instance) {
    // selectedDates → Array<Date>
    // dateStr → string
    // instance → Flatpickr instance
  }
});

Аргументы onChange:

selectedDates

Всегда массив объектов Date, независимо от режима:

  • single → [Date]
  • multiple → [Date, Date, ...]
  • range → [startDate, endDate]

dateStr

Строковое представление выбранной даты:

"2026-06-01"

Формируется через dateFormat или altFormat.

instance

Ссылка на текущий инстанс календаря.

Форматированное строковое значение (dateStr)

dateStr зависит от конфигурации:

{
  dateFormat: "Y-m-d"
}

Результат:

2026-06-01

При изменении формата:

dateFormat: "d/m/Y"

Результат:

01/06/2026

Если включён enableTime:

2026-06-01 14:30

Возвращаемое значение метода setDate

Метод setDate возвращает void, но изменяет состояние инстанса:

fp.setDate("2026-06-01");

После вызова обновляются:

  • selectedDates
  • input.value
  • UI календаря

При необходимости можно передавать второй аргумент:

fp.setDate("2026-06-01", true);

true вызывает событие onChange.

getDate и его возвращаемые значения

Метод getDate возвращает дату в нескольких форматах:

fp.getDate(); // Date

Сигнатуры:

Без параметров

Date

С параметром true

fp.getDate(true);

Возвращает timestamp:

1717200000000

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

fp.getDate(true, "Y-m-d");

Возвращает строку:

2026-06-01

Возвращаемые значения при range-режиме

В режиме диапазона (mode: "range") структура всегда фиксирована:

selectedDates = [start, end]

Если диапазон не завершён:

selectedDates = [start]

Это важно для обработки UI-состояний:

  • один клик → начало диапазона
  • второй клик → завершение диапазона

Возвращаемые значения при multiple режиме

mode: "multiple"

Каждый клик добавляет или удаляет элемент массива:

selectedDates = [Date, Date, Date]

Особенность: порядок соответствует хронологии выбора, а не сортировке (если не включены дополнительные настройки).

Значение input.value

DOM-значение input всегда строковое:

fp.input.value

Пример:

2026-06-01, 2026-06-10

или:

2026-06-01 to 2026-06-10

Формат зависит от:

  • mode
  • dateFormat
  • rangeSeparator

Возвращаемые значения parseDate и formatDate

parseDate

fp.parseDate("2026-06-01", "Y-m-d");

Возвращает:

Date

Если строка невалидна:

null

formatDate

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

Возвращает:

string

Пример:

2026-06-01

Структура возвращаемых значений в time-enabled режиме

При включённом времени:

enableTime: true

selectedDates включает точное время:

Date("2026-06-01T14:30:00")

Методы возвращают:

  • Date с часами/минутами
  • строку с временем
  • timestamp с миллисекундами

Возвращаемое состояние при clear()

Метод очистки:

fp.clear();

Изменяет:

selectedDates = []
input.value = ""

UI синхронизируется с пустым состоянием.

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

При использовании altInput:

altInput: true,
altFormat: "F j, Y"

Фактические значения разделяются:

  • input.value → технический формат
  • altInput.value → человекочитаемый формат

Пример:

input.value → 2026-06-01
altInput.value → June 1, 2026

Итоговая модель данных Flatpickr

Все возвращаемые значения можно свести к нескольким слоям:

1. Внутренний слой

  • Date
  • массив Date

2. API слой

  • timestamp (number)
  • string (formatted)
  • instance object

3. DOM слой

  • input.value (string)
  • altInput.value (string)

Поведение возвратов при изменении конфигурации

Изменение опций влияет не на тип данных, а на их представление:

  • dateFormat → строка
  • mode → структура массива
  • enableTime → расширение Date
  • rangeSeparator → формат строки

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

Оглавление