Установка через npm

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

Установка пакета

Базовая установка выполняется стандартной командой npm:

npm install flatpickr

После установки пакет попадает в node_modules/flatpickr и становится доступным для импортирования в модульной системе проекта.

Для проектов, использующих Yarn:

yarn add flatpickr

Для pnpm:

pnpm add flatpickr

Во всех случаях устанавливается одна и та же структура пакета, совместимая с ESM и CommonJS окружениями.

Подключение в модульной системе (ESM)

В современных сборщиках (Vite, Rollup, Webpack с ESM) предпочтителен импорт через import:

import flatpickr from "flatpickr";

Базовый вызов инициализации:

flatpickr("#date-input", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
});

Такой способ обеспечивает tree-shaking и корректную работу в современных сборках.

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

В Node.js-проектах или старых конфигурациях Webpack используется require:

const flatpickr = require("flatpickr");

Далее API используется аналогично:

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

Подключение стилей после установки npm

Flatpickr не включает стили автоматически в runtime-бандл, поэтому CSS необходимо импортировать отдельно.

В ESM-сборках:

import "flatpickr/dist/flatpickr.min.css";

Также доступны темы:

import "flatpickr/dist/themes/dark.css";
import "flatpickr/dist/themes/material_blue.css";

Стили лежат внутри пакета flatpickr/dist/.

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

Vite корректно обрабатывает npm-модули без дополнительной конфигурации:

import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css";

flatpickr("#calendar", {});

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

  • мгновенная поддержка ESM
  • корректная обработка CSS-импортов
  • отсутствие необходимости в alias-конфигурации

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

В Webpack подключение аналогично, но важно наличие CSS-loader:

import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css";

Минимальная конфигурация loader’а:

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"],
    },
  ],
}

Подключение в TypeScript-проектах

Flatpickr содержит встроенные типы, поэтому отдельная установка @types не требуется.

Пример использования:

import flatpickr from "flatpickr";

flatpickr<HTMLInputElement>("#date", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
});

Типизация позволяет явно указать HTML-элемент и предотвращает ошибки при работе с DOM.

Структура пакета после установки

После установки в node_modules/flatpickr доступны ключевые директории:

  • dist/ — собранные файлы (JS, CSS, темы)
  • l10n/ — локализации
  • esm/ — ESM-сборка
  • types/ — TypeScript определения
  • plugins/ — плагины расширения функциональности

Импорт локализаций

Локализации подключаются отдельно:

import flatpickr from "flatpickr";
import { Russian } from "flatpickr/dist/l10n/ru.js";

flatpickr("#date", {
  locale: Russian,
});

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

Подключение в SSR-средах

В серверном рендеринге (например, Next.js) важно учитывать отсутствие DOM:

import dynamic from "next/dynamic";

const Flatpickr = dynamic(() => import("flatpickr"), { ssr: false });

Инициализация выполняется только на клиенте, так как библиотека зависит от window и document.

Минимальный production-паттерн

Рекомендуемая схема подключения через npm:

import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css";
import { Russian } from "flatpickr/dist/l10n/ru.js";

export function initDatepicker(selector) {
  return flatpickr(selector, {
    locale: Russian,
    enableTime: true,
    dateFormat: "d.m.Y H:i",
  });
}

Такой подход позволяет изолировать инициализацию и повторно использовать компонент в разных частях приложения.

Оглавление