Получение выбранных дат

После выбора даты или нескольких дат экземпляр Flatpickr сохраняет результат во внутреннем состоянии. Для получения выбранных значений используется свойство selectedDates, которое содержит массив объектов Date.

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

const fp = flatpickr("#date");

console.log(fp.selectedDates);

Если пользователь выбрал дату:

[
    Date Mon Jun 01 2026 00:00:00
]

Если дата ещё не выбрана:

[]

Свойство всегда возвращает массив, даже когда разрешён выбор только одной даты.

---

Свойство selectedDates

Каждый экземпляр Flatpickr содержит набор внутренних свойств, среди которых находится selectedDates.

const fp = flatpickr("#date");

const dates = fp.selectedDates;

console.log(dates);

Тип данных:

Array<Date>

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

• содержит реальные объекты Date;
• обновляется автоматически после выбора даты;
• используется большинством внутренних механизмов Flatpickr;
• подходит для вычислений и сравнения дат.

Пример получения первой выбранной даты:

const selectedDate = fp.selectedDates[0];

console.log(selectedDate);

---

Получение одной выбранной даты

Наиболее распространённый сценарий — работа с календарём в режиме выбора одной даты.

const fp = flatpickr("#date");

const selectedDate = fp.selectedDates[0];

console.log(selectedDate);

Результат:

2026-06-01T00:00:00.000Z

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

if (fp.selectedDates.length > 0) {
    console.log(fp.selectedDates[0]);
}

Или:

const selectedDate = fp.selectedDates[0] ?? null;

console.log(selectedDate);

---

Получение даты в виде строки

Массив selectedDates возвращает объект Date, однако во многих случаях требуется строковое представление.

Пример:

const date = fp.selectedDates[0];

console.log(date.toDateString());

Результат:

Mon Jun 01 2026

Получение ISO-формата:

console.log(date.toISOString());

Результат:

2026-06-01T00:00:00.000Z

Получение локализованного значения:

console.log(date.toLocaleDateString());

---

Использование input.value

Flatpickr синхронизирует выбранную дату со связанным полем ввода.

Поэтому данные можно получить напрямую из элемента формы.

const input = document.querySelector("#date");

console.log(input.value);

Если используется формат:

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

После выбора даты:

01.06.2026

Такой подход удобен для отображения значения пользователю, однако для вычислений предпочтительнее использовать selectedDates.

---

Получение даты через экземпляр календаря

Экземпляр Flatpickr обычно сохраняется в переменную.

const picker = flatpickr("#date");

Получение значения:

const selectedDate = picker.selectedDates[0];

Либо:

console.log(picker.selectedDates);

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

---

Получение нескольких выбранных дат

В режиме "multiple" пользователь может выбрать несколько дат.

const fp = flatpickr("#date", {
    mode: "multiple"
});

После выбора:

[
    Date Mon Jun 01 2026,
    Date Tue Jun 02 2026,
    Date Fri Jun 05 2026
]

Получение всех значений:

fp.selectedDates.forEach(date => {
    console.log(date);
});

Результат:

Mon Jun 01 2026
Tue Jun 02 2026
Fri Jun 05 2026

---

Получение диапазона дат

В режиме диапазона используются две даты:

const fp = flatpickr("#date", {
    mode: "range"
});

После выбора диапазона:

[
    Date Mon Jun 01 2026,
    Date Fri Jun 05 2026
]

Получение начала диапазона:

const startDate = fp.selectedDates[0];

Получение конца диапазона:

const endDate = fp.selectedDates[1];

Пример:

console.log("Начало:", startDate);
console.log("Конец:", endDate);

---

Проверка количества выбранных дат

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

console.log(fp.selectedDates.length);

Пример проверки:

if (fp.selectedDates.length === 0) {
    console.log("Дата не выбрана");
}

Для диапазона:

if (fp.selectedDates.length === 2) {
    console.log("Диапазон полностью выбран");
}

---

Получение данных внутри onChange

Очень часто выбранные даты нужны непосредственно после изменения значения.

Для этого используется событие onChange.

flatpickr("#date", {
    onChange(selectedDates) {
        console.log(selectedDates);
    }
});

После выбора даты:

[
    Date Mon Jun 01 2026
]

Параметр selectedDates уже содержит актуальные значения.

---

Аргументы обработчика onChange

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

flatpickr("#date", {
    onChange(selectedDates, dateStr, instance) {
        console.log(selectedDates);
        console.log(dateStr);
        console.log(instance);
    }
});

Параметры:

Параметр	Описание
selectedDates	массив объектов Date
dateStr	строка даты согласно dateFormat
instance	экземпляр Flatpickr

Пример результата:

selectedDates:
[
    Date Mon Jun 01 2026
]

dateStr:
"2026-06-01"

---

Получение строки через dateStr

Иногда объект Date не нужен.

В этом случае можно использовать второй аргумент события.

flatpickr("#date", {
    onChange(selectedDates, dateStr) {
        console.log(dateStr);
    }
});

Результат:

2026-06-01

Формат зависит от настройки:

dateFormat: "d.m.Y"

Тогда:

01.06.2026

---

Получение данных внутри onClose

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

flatpickr("#date", {
    onClose(selectedDates, dateStr) {
        console.log(selectedDates);
        console.log(dateStr);
    }
});

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

---

Получение даты по требованию

Нередко дата требуется только после нажатия кнопки.

const fp = flatpickr("#date");

document
    .querySelector("#save")
    .addEventListener("click", () => {

        console.log(fp.selectedDates[0]);
    });

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

---

Преобразование массива дат

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

Получение ISO-строк:

const result = fp.selectedDates.map(date =>
    date.toISOString()
);

console.log(result);

Результат:

[
    "2026-06-01T00:00:00.000Z",
    "2026-06-02T00:00:00.000Z"
]

Получение локальных дат:

const result = fp.selectedDates.map(date =>
    date.toLocaleDateString()
);

---

Получение timestamp

Каждый объект Date может быть преобразован в Unix-время.

const timestamp =
    fp.selectedDates[0].getTime();

console.log(timestamp);

Результат:

1780272000000

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

---

Проверка выбранной даты

Полученная дата может участвовать в логике приложения.

const selectedDate = fp.selectedDates[0];

if (selectedDate) {
    console.log("Дата выбрана");
}

Сравнение с текущей датой:

const today = new Date();

if (selectedDate > today) {
    console.log("Будущая дата");
}

---

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

Flatpickr хранит последнюю выбранную дату отдельно.

console.log(fp.latestSelectedDateObj);

Пример результата:

Date Mon Jun 01 2026

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

---

Различия между selectedDates и input.value

selectedDates

fp.selectedDates

Возвращает:

[
    Date(...)
]

Преимущества:

• работа с объектами Date;
• математические операции над датами;
• сравнение значений;
• независимость от визуального формата.

input.value

input.value

Возвращает:

"01.06.2026"

Преимущества:

• готово для отображения;
• удобно для передачи в форму;
• соответствует настройке dateFormat.

---

Типичные ошибки при получении выбранных дат

Обращение к несуществующей дате

Неправильно:

console.log(fp.selectedDates[0].getTime());

Если дата не выбрана:

TypeError

Правильно:

if (fp.selectedDates.length) {
    console.log(
        fp.selectedDates[0].getTime()
    );
}

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

Неправильно:

const date = document.querySelector("#date").value;

console.log(date.getTime());

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

Правильно:

const date = fp.selectedDates[0];

console.log(date.getTime());

Неверное ожидание одного значения в режиме multiple

В режиме множественного выбора:

mode: "multiple"

Результат всегда представляет собой массив:

fp.selectedDates

Даже если выбрана только одна дата.

Поэтому следует учитывать возможность наличия нескольких элементов.

---

Основные способы получения выбранных дат

Способ	Возвращаемое значение
selectedDates	массив объектов Date
selectedDates[0]	первая выбранная дата
selectedDates[1]	вторая дата диапазона
latestSelectedDateObj	последняя выбранная дата
dateStr в событиях	строковое представление
input.value	значение поля ввода
selectedDates.length	количество выбранных дат

Свойство selectedDates является центральным механизмом получения выбранных дат в Flatpickr. Именно оно предоставляет полный доступ к объектам Date, обеспечивает корректную работу с одиночными датами, диапазонами и множественным выбором, а также служит основой для большинства операций обработки календарных данных.