Простейший пример инициализации

Инициализация Flatpickr начинается с подключения библиотеки и привязки её к HTML-элементу ввода. Базовый сценарий предполагает работу с обычным <input> полем, которое превращается в интерактивный календарь без дополнительной разметки.

Подключение библиотеки

Flatpickr может быть подключён двумя основными способами: через CDN или через менеджер пакетов. В простейшем случае используется CDN-версия, что позволяет быстро проверить работу библиотеки без сборщика и настройки окружения.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

Подключение стилей обязательно, так как именно они отвечают за внешний вид календаря, навигации и элементов интерфейса.

Подготовка HTML-элемента

Минимальная структура включает один input-элемент, к которому будет применена инициализация:

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

Тип text используется сознательно, поскольку Flatpickr заменяет стандартное поведение поля ввода собственным UI. Использование type="date" в данном случае не требуется и может приводить к конфликтам с нативным календарём браузера.

Базовая инициализация

Основной способ активации Flatpickr — вызов функции flatpickr() с передачей селектора или DOM-элемента.

flatpickr("#dateInput");

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

Альтернативный вариант — передача DOM-элемента:

const input = document.getElementById("dateInput");

flatpickr(input);

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

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

При стандартной инициализации без параметров Flatpickr использует следующие настройки:

  • формат даты зависит от локали (по умолчанию YYYY-MM-DD);
  • календарь открывается при фокусе на поле;
  • выбор даты закрывает календарь автоматически;
  • поддерживается ручной ввод значения в поле;
  • минимальные ограничения на ввод отсутствуют.

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

Инициализация с проверкой готовности DOM

При подключении скрипта в <head> или в начале документа важно учитывать момент загрузки DOM. Инициализация до появления элемента приведёт к ошибке.

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

document.addEventListener("DOMContentLoaded", function () {
  flatpickr("#dateInput");
});

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

Множественная инициализация

Flatpickr поддерживает применение сразу к нескольким элементам через CSS-селектор. Это позволяет инициализировать все поля с одинаковым классом одним вызовом:

<input type="text" class="date-field">
<input type="text" class="date-field">
<input type="text" class="date-field">
flatpickr(".date-field");

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

Сохранение экземпляра

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

const calendar = flatpickr("#dateInput");

calendar.open();

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

Минимальная структура рабочего примера

Полный минимальный пример включает HTML-разметку, подключение и инициализацию:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
</head>
<body>

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

  <script>
    flatpickr("#dateInput");
  </script>

</body>
</html>

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

Оглавление