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

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

Основная команда добавления Flatpickr в проект:

yarn add flatpickr

После выполнения в package.json появится зависимость:

{
  "dependencies": {
    "flatpickr": "^4.x.x"
  }
}

Yarn автоматически скачивает пакет из npm-реестра и помещает его в node_modules, а также фиксирует версию в yarn.lock, обеспечивая воспроизводимость сборки.

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

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

  • dist/ — собранные файлы (UMD, ESM, minified версии)
  • src/ — исходный код библиотеки
  • types/ — TypeScript-определения (в современных версиях)
  • l10n/ — локализации

Ключевой файл для подключения — dist/flatpickr.js, но в большинстве сборок используется импорт как модуля.

Подключение Flatpickr в проекте

ES Modules (современный подход)

import flatpickr from "flatpickr";

Инициализация календаря:

flatpickr("#dateInput", {});

CommonJS (Node.js окружения)

const flatpickr = require("flatpickr");

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

flatpickr("#dateInput", {});

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

Flatpickr не работает корректно без CSS, поэтому стили подключаются отдельно:

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

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

Также доступны альтернативные темы:

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

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

В монорепозиториях Flatpickr устанавливается на уровне корневого workspace или конкретного пакета:

yarn workspace frontend add flatpickr

или

yarn add flatpickr -W

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

Yarn Berry (v2+ и Plug’n’Play)

В Yarn 2+ (Berry) Flatpickr устанавливается аналогично:

yarn add flatpickr

Но вместо node_modules может использоваться PnP-модель. В этом случае:

  • отсутствует классическая папка node_modules
  • зависимости резолвятся через .pnp.cjs
  • некоторые старые инструменты могут требовать настройку совместимости

Для проектов с Flatpickr важно убедиться, что bundler поддерживает PnP (Vite, Webpack 5 — поддерживают).

TypeScript и типы

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

yarn add -D @types/flatpickr

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

import flatpickr from "flatpickr";

flatpickr("#dateInput", {
  dateFormat: "Y-m-d",
});

Типы обеспечивают строгую проверку конфигурации и событий, включая:

  • onChange
  • onOpen
  • onClose
  • disable
  • enable

Установка локалей через Yarn

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

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

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

При использовании Yarn эти файлы уже доступны внутри пакета, отдельная установка не требуется.

Плагины Flatpickr

Плагины также входят в пакет:

import rangePlugin from "flatpickr/dist/plugins/rangePlugin";

Подключение через конфигурацию:

flatpickr("#start", {
  plugins: [rangePlugin({ input: "#end" })]
});

Использование с современными сборщиками

Vite

Flatpickr работает без дополнительной конфигурации:

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

Webpack

При необходимости обработки CSS:

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

Управление версиями через Yarn

Yarn позволяет фиксировать версию Flatpickr для стабильности интерфейса календаря:

yarn add flatpickr@4.6.13

Либо диапазон:

"flatpickr": "~4.6.0"

Это важно, поскольку изменения в API или стилях могут влиять на внешний вид календаря в интерфейсе.

Обновление пакета

yarn upgrade flatpickr

или до конкретной версии:

yarn upgrade flatpickr@latest

Кэширование Yarn и влияние на установку

Yarn активно использует кэш, поэтому повторная установка Flatpickr выполняется быстрее:

  • пакет берётся из локального кэша
  • сетевой запрос не выполняется
  • ускоряется CI/CD сборка

Очистка кэша при необходимости:

yarn cache clean flatpickr

Частые проблемы при установке через Yarn

  • отсутствие CSS из-за пропущенного импорта flatpickr.min.css
  • конфликты версий при монорепозиториях
  • несовместимость PnP с устаревшими сборщиками
  • дублирование экземпляров Flatpickr при неправильном hoisting

Корректная настройка Yarn и сборщика устраняет большинство подобных проблем и обеспечивает стабильную работу календаря в интерфейсе.

Оглавление