Режим single

Flatpickr в режиме single использует модель выбора одной даты как базовый сценарий работы календаря. Этот режим является дефолтным поведением библиотеки и активируется автоматически при отсутствии параметра mode или при явном указании mode: "single".

Режим single представляет собой интерфейс, в котором пользователь может выбрать только одну календарную дату. Любая повторная попытка выбора не расширяет диапазон и не создаёт набор значений, как это происходит в режимах range или multiple. Вместо этого предыдущее значение полностью заменяется новым.

Минимальная инициализация календаря в режиме single выглядит следующим образом:

flatpickr("#dateInput", {
  mode: "single"
});

Несмотря на то что параметр mode в данном случае не обязателен, его явное указание используется для повышения читаемости кода и предотвращения неоднозначности при расширении конфигурации.

Поведение по умолчанию

При отсутствии пользовательских настроек single режим обладает следующими характеристиками:

  • выбор строго одной даты;
  • отсутствие диапазонов и списков дат;
  • автоматическая замена предыдущего значения;
  • сохранение выбранного значения в формате, определённом dateFormat.

Пример:

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

После выбора даты, например 2026-05-30, поле получит значение:

2026-05-30

Инициализация с предустановленной датой

Для задания начального значения используется параметр defaultDate:

flatpickr("#dateInput", {
  mode: "single",
  defaultDate: "2026-06-10"
});

Возможна передача:

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

Пример с объектом:

flatpickr("#dateInput", {
  defaultDate: new Date()
});

Формат отображения и хранения даты

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

  • dateFormat — формат значения в input;
  • altInput — альтернативное отображение для пользователя;
  • altFormat — формат отображения альтернативного поля.

Пример конфигурации:

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

В этом случае:

  • в input хранится 2026-06-10;
  • пользователю отображается 10 June 2026.

Обработка события изменения значения

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

onChange

flatpickr("#dateInput", {
  mode: "single",
  onChange: function(selectedDates, dateStr, instance) {
    console.log(selectedDates[0]);
    console.log(dateStr);
  }
});

Параметры:

  • selectedDates — массив, содержащий одну дату;
  • dateStr — строковое представление;
  • instance — экземпляр календаря.

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

Ограничение диапазона дат

Single режим часто применяется вместе с ограничениями выбора:

flatpickr("#dateInput", {
  mode: "single",
  minDate: "today",
  maxDate: "2026-12-31"
});

Возможные сценарии:

  • блокировка прошлых дат;
  • ограничение будущего периода;
  • фиксация диапазона доступных значений.

Отключение конкретных дат

Single режим сохраняет полную совместимость с параметром disable:

flatpickr("#dateInput", {
  mode: "single",
  disable: [
    "2026-06-15",
    "2026-06-20"
  ]
});

Также поддерживаются функции:

flatpickr("#dateInput", {
  disable: [
    function(date) {
      return date.getDay() === 0; // отключение воскресений
    }
  ]
});

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

Параметр allowInput влияет на возможность ручного ввода:

flatpickr("#dateInput", {
  mode: "single",
  allowInput: true
});

Поведение:

  • при true пользователь может вводить дату вручную;
  • при false ввод ограничен только через календарь.

В single режиме это особенно важно, поскольку любое некорректное значение автоматически сбрасывается при потере фокуса.

inline режим и single

Single режим часто используется вместе с inline, при котором календарь всегда отображается на странице:

flatpickr("#dateInput", {
  mode: "single",
  inline: true
});

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

  • отсутствие всплывающего окна;
  • постоянная визуализация календаря;
  • мгновенное обновление значения при выборе даты.

Работа с датами через API

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

setDate

const fp = flatpickr("#dateInput", {
  mode: "single"
});

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

При вызове:

  • значение заменяется полностью;
  • предыдущая дата удаляется.

clear

fp.clear();

Полностью очищает выбранную дату, возвращая состояние без значения.

Особенности взаимодействия с формами

В single режиме календарь интегрируется с HTML input как обычное поле:

<input id="dateInput" type="text">

Отправка формы приводит к передаче одного значения:

dateInput=2026-07-01

Никаких массивов или структурированных данных не используется, что упрощает серверную обработку.

Сочетание с time режимом

Single режим может расширяться до выбора даты и времени:

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

Поведение:

  • выбор даты фиксирует календарную часть;
  • дополнительный интерфейс позволяет указать время;
  • итоговое значение остаётся единым scalar-значением.

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

Ключевая особенность single режима — полная замена значения:

  1. выбрана дата A;
  2. пользователь выбирает дату B;
  3. значение A полностью удаляется;
  4. сохраняется только B.

Это поведение отличается от:

  • range, где формируется интервал;
  • multiple, где накапливается список дат.

Валидация и обработка ошибок

Single режим полагается на встроенную валидацию Flatpickr:

  • некорректные строки игнорируются;
  • даты вне диапазона блокируются;
  • отключённые даты недоступны для выбора.

При ручном вводе некорректное значение может быть очищено автоматически при событии blur.

Практические сценарии использования

Single режим применяется в задачах, где требуется строгое единственное значение:

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

Во всех этих случаях отсутствие множественности упрощает как UI, так и бизнес-логику обработки данных.

Оглавление