Метод clear

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

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

Поведение метода

При вызове clear происходит несколько операций:

  • очищается массив выбранных дат (selectedDates);
  • сбрасывается значение инпута (input.value);
  • обновляется UI календаря;
  • при необходимости вызываются коллбеки жизненного цикла;
  • внутреннее состояние переводится в «пустое» значение без выбранных дат.

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

Сигнатура и базовое использование

Метод вызывается на экземпляре Flatpickr:

instance.clear()

где instance — объект, возвращаемый при инициализации календаря.

Пример:

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

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

fp.clear();

После выполнения clear поле ввода становится пустым, а внутренний список выбранных дат очищается.

Отличие от ручного очищения input

Прямое изменение значения поля:

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

не приводит к полной синхронизации состояния Flatpickr. В таком случае:

  • selectedDates может остаться прежним;
  • календарь может отображать старое выделение;
  • события библиотеки не всегда корректно отрабатывают.

Метод clear устраняет эти несоответствия, работая через внутренний API.

Взаимодействие с событиями

При вызове clear могут срабатывать события, связанные с изменением значения:

  • onChange — вызывается при очистке значения;
  • onValueUpdate — отражает обновление внутреннего значения;
  • onDayCreate не вызывается, так как структура календаря не пересоздаётся.

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

flatpickr("#date", {
  onChange: function(selectedDates, dateStr, instance) {
    console.log("Изменение:", dateStr);
  }
});

После вызова:

instance.clear();

onChange будет вызван с пустым значением.

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

Одиночная дата

В стандартном режиме:

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

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

Режим диапазона

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

В режиме диапазона очищаются обе границы:

  • начальная дата;
  • конечная дата.

UI возвращается в исходное состояние без выделения диапазона.

Множественный выбор

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

В этом случае метод удаляет все элементы массива selectedDates.

Влияние на defaultDate

Если в конфигурации задано:

flatpickr("#date", {
  defaultDate: "2026-06-01"
});

вызов clear не изменяет defaultDate. Это ключевой момент:

  • defaultDate остаётся неизменным;
  • clear влияет только на текущий выбор;
  • повторное открытие календаря не восстанавливает значение автоматически, если оно не задано через setDate.

Сравнение clear и setDate(null)

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

clear()

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

setDate(null)

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

Внутренне clear считается более стабильным и предпочтительным методом.

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

При включённой опции:

flatpickr("#date", {
  allowInput: true
});

пользователь может вручную вводить значение. В этом случае clear:

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

Поведение при inline-режиме

flatpickr("#date", {
  inline: true
});

В inline-режиме календарь всегда отображается на странице.

clear в этом случае:

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

Работа с time picker

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

flatpickr("#date", {
  enableTime: true
});

clear удаляет не только дату, но и:

  • часы;
  • минуты;
  • секунды (если включены).

Поле возвращается к пустому значению без временной составляющей.

Поведение при minDate и maxDate

Ограничения диапазона не влияют на работу clear.

flatpickr("#date", {
  minDate: "2026-01-01",
  maxDate: "2026-12-31"
});

После очистки:

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

Программные сценарии использования

Сброс формы

form.addEventListener("reset", () => {
  instance.clear();
});

Метод часто используется в связке с HTML-формами, чтобы гарантировать полное очищение состояния календаря.

Условная очистка

if (!isValidRange) {
  instance.clear();
}

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

Очистка перед установкой нового значения

instance.clear();
instance.setDate("2026-06-10");

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

Особенности внутренней реализации

При вызове clear библиотека:

  • очищает массив selectedDates;
  • обнуляет latestSelectedDateObj;
  • сбрасывает строковое значение input.value;
  • пересчитывает UI-состояние календаря;
  • инициирует обновление отображения.

При этом экземпляр остаётся активным, а DOM-структура не пересоздаётся.

Ограничения и нюансы

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

Поведение при множественных инстансах

Если на странице несколько календарей:

const fp1 = flatpickr("#date1");
const fp2 = flatpickr("#date2");

clear действует строго локально:

fp1.clear();

не затрагивает fp2, так как состояние каждого экземпляра изолировано.

Типичные ошибки использования

  • попытка очистить значение через input.value = "" вместо clear;
  • ожидание, что defaultDate будет сброшен;
  • вызов clear до инициализации экземпляра;
  • смешивание с destroy, что приводит к потере инстанса.

Сочетание с другими методами

clear часто используется вместе с:

  • setDate — для переустановки значения;
  • open / close — для управления UI после очистки;
  • destroy — в сценариях полного удаления компонента.

Пример цепочки:

instance.clear();
instance.close();

Поведение при асинхронных сценариях

Если clear вызывается в асинхронном коде:

setTimeout(() => {
  instance.clear();
}, 1000);

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

Оглавление