Подключение через CDN

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

Для работы Flatpickr требуется подключить два типа ресурсов: JavaScript-файл и CSS-стили. Наиболее распространённые CDN-источники — jsDelivr и cdnjs.

Пример подключения через jsDelivr:

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

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

Аналогичный вариант через cdnjs:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>

Разделение CSS и JS принципиально важно: без стилей календарь будет функциональным, но визуально не оформленным.

Инициализация после подключения CDN

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

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

<script>
  flatpickr("#date", {
    dateFormat: "Y-m-d"
  });
</script>

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

Подключение конкретной версии

Использование CDN без фиксации версии может привести к неожиданным изменениям поведения при обновлении библиотеки. Поэтому в производственных проектах предпочтительно указывать версию явно:

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

или

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

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

Подключение локалей через CDN

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

Пример подключения русской локали:

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ru.js"></script>

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

<script>
  flatpickr("#date", {
    locale: "ru"
  });
</script>

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

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ru.js"></script>
<script>
  flatpickr.localize(flatpickr.l10ns.ru);
</script>

Подключение тем оформления

CSS-часть Flatpickr может расширяться дополнительными темами. При использовании CDN подключение темы выглядит как подключение отдельного файла стилей:

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

Среди доступных вариантов встречаются light, dark, material_blue, confetti и другие. При подключении темы базовый файл CSS также обязателен.

Инициализация с дополнительными параметрами

После подключения через CDN доступны все стандартные конфигурации:

<script>
  flatpickr("#date", {
    enableTime: true,
    time_24hr: true,
    minDate: "today",
    maxDate: "2026-12-31",
    defaultDate: "2026-01-01"
  });
</script>

CDN-режим не ограничивает функциональность, поэтому доступны режимы множественного выбора, диапазоны дат и кастомные форматы.

Подключение плагинов через CDN

Дополнительные расширения функциональности также могут подключаться через CDN. Например, плагин диапазона дат:

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/rangePlugin.js"></script>

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

<script>
  flatpickr("#startDate", {
    plugins: [new rangePlugin({ input: "#endDate" })]
  });
</script>

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

Использование SRI и безопасность

При подключении через CDN возможно использование Subresource Integrity. Это механизм проверки целостности загружаемых файлов:

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css"
      integrity="sha384-..."
      crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"
        integrity="sha384-..."
        crossorigin="anonymous"></script>

SRI защищает от подмены содержимого на стороне CDN.

Типичные ошибки при подключении через CDN

Одной из распространённых проблем становится попытка инициализации до загрузки библиотеки. В таком случае глобальный объект отсутствует, и возникает ошибка flatpickr is not defined.

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

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

Особенности работы в разных окружениях

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

В условиях отсутствия сборщика CDN также упрощает интеграцию с CMS и legacy-проектами, где установка npm-пакетов невозможна или нежелательна.

Зависимость порядка загрузки ресурсов

Правильная последовательность подключения критична:

  1. CSS Flatpickr
  2. JavaScript библиотеки
  3. Локали и плагины
  4. Инициализационный скрипт

Нарушение порядка приводит либо к отсутствию стилей, либо к недоступности API расширений.

Работа с несколькими инстансами

CDN-подключение позволяет инициализировать несколько независимых календарей на одной странице:

<script>
  flatpickr("#date1", {});
  flatpickr("#date2", { enableTime: true });
  flatpickr("#date3", { mode: "range" });
</script>

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

Оглавление