Параметр defaultDate

defaultDate задаёт начальное значение календаря Flatpickr при инициализации, определяя дату или набор дат, которые будут выбраны в интерфейсе до любого взаимодействия пользователя. Параметр влияет одновременно на визуальное состояние календаря и на значение связанного input-элемента, если не переопределено поведение другими настройками.

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

Строка

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

flatpickr("#input", {
  defaultDate: "2026-05-30"
});

Строка интерпретируется в соответствии с настройками dateFormat, если они заданы. При отсутствии явного формата используется стандартный ISO-парсер.

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

Объект Date

Использование нативного объекта Date позволяет избежать неоднозначности парсинга:

flatpickr("#input", {
  defaultDate: new Date(2026, 4, 30)
});

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

Массив дат

При работе в режимах multiple или range параметр принимает массив значений:

flatpickr("#input", {
  mode: "multiple",
  defaultDate: ["2026-05-30", "2026-06-01", "2026-06-10"]
});

или:

flatpickr("#input", {
  mode: "range",
  defaultDate: ["2026-05-01", "2026-05-10"]
});

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

Поведение при инициализации

При создании экземпляра Flatpickr значение defaultDate обрабатывается до рендера календаря. Последовательность обработки включает несколько этапов:

  1. Проверка наличия входного значения в input
  2. Определение источника приоритета между input value и defaultDate
  3. Парсинг значения в зависимости от формата
  4. Установка внутреннего состояния календаря
  5. Отображение выбранной даты в UI

Если input уже содержит значение, оно может иметь приоритет над defaultDate, если не переопределено настройкой defaultDate совместно с allowInput и ручной инициализацией через setDate.

Приоритет значений

Поведение при конфликте источников данных зависит от контекста:

  • Значение input по умолчанию может перекрывать defaultDate
  • Явный вызов setDate после инициализации имеет наивысший приоритет
  • defaultDate применяется только на этапе создания экземпляра
<input id="input" value="2026-01-01">

<script>
flatpickr("#input", {
  defaultDate: "2026-05-30"
});
</script>

В таком случае итоговое значение может зависеть от того, как Flatpickr интерпретирует уже существующее значение input.

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

Форматирование напрямую влияет на интерпретацию строкового defaultDate:

flatpickr("#input", {
  dateFormat: "d.m.Y",
  defaultDate: "30.05.2026"
});

Если формат не совпадает с входной строкой, возможны некорректные результаты парсинга или fallback к текущей дате.

Использование объекта Date устраняет зависимость от dateFormat при разборе, но не при отображении.

Поведение в различных режимах

Обычный режим

В стандартной конфигурации календаря defaultDate устанавливает одну выбранную дату:

flatpickr("#input", {
  defaultDate: "2026-05-30"
});

Режим multiple

Каждая дата из массива отображается как выбранная:

flatpickr("#input", {
  mode: "multiple",
  defaultDate: ["2026-05-01", "2026-05-05"]
});

Внутренне Flatpickr формирует список выбранных значений, который синхронизируется с UI.

Режим range

Две даты определяют начало и конец диапазона:

flatpickr("#input", {
  mode: "range",
  defaultDate: ["2026-05-01", "2026-05-10"]
});

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

Особенности парсинга

Flatpickr использует собственный парсер дат, который учитывает:

  • локализацию
  • формат даты
  • временную зону (частично, в зависимости от конфигурации)
  • режим календаря

При неоднозначных строках, например "05-06-2026", интерпретация зависит от dateFormat, что может привести к различным результатам в зависимости от настроек.

defaultDate и динамическое изменение состояния

После инициализации изменение defaultDate напрямую не влияет на уже созданный экземпляр. Для обновления состояния используется метод:

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

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

Влияние на altInput

При использовании altInput: true значение defaultDate синхронизируется с альтернативным полем отображения:

flatpickr("#input", {
  altInput: true,
  altFormat: "F j, Y",
  defaultDate: "2026-05-30"
});

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

  • input хранит внутреннее значение
  • altInput отображает форматированную дату
  • defaultDate инициализирует оба значения синхронно

Сочетание с minDate и maxDate

Если defaultDate выходит за пределы ограничений, заданных через minDate и maxDate, результат зависит от внутренней логики:

flatpickr("#input", {
  minDate: "2026-06-01",
  defaultDate: "2026-05-30"
});

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

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

Предзаполнение форм

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

Используется для установки текущей даты как значения по умолчанию.

Восстановление сохранённого состояния

flatpickr("#input", {
  defaultDate: localStorage.getItem("savedDate")
});

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

Работа с диапазонами дат

flatpickr("#input", {
  mode: "range",
  defaultDate: ["2026-05-01", "2026-05-15"]
});

Применяется для фильтрации периодов, отчётов и календарных выборок.

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

При передаче некорректной строки:

flatpickr("#input", {
  defaultDate: "invalid-date"
});

возможны следующие сценарии:

  • игнорирование значения
  • установка текущей даты
  • частичный парсинг при совпадении фрагментов

Поведение зависит от версии Flatpickr и конфигурации локали, однако в большинстве случаев система стремится к безопасному fallback.

Связь с внутренним состоянием экземпляра

После инициализации значение defaultDate трансформируется в внутреннее состояние selectedDates. Дальнейшая работа календаря опирается именно на него, а не на исходный параметр.

instance.selectedDates

Таким образом, defaultDate является входной точкой и не сохраняется как активная переменная конфигурации после создания экземпляра.

Оглавление