flatpickr

flatpickr is a JavaScript datetime picker built to replace inconsistent native browser date inputs and heavier alternatives that pull in jQuery, Bootstrap, or moment.js. It runs with zero runtime dependencies, works down to IE9, and covers single dates, date ranges, multiple-date selection, and time-only picking through one configurable API.

The library ships with 51 locales, eight built-in themes (including dark and material variants), and a plugin system (bundled plugins include month-select, week-select, label, and confirm-date) for extending default behavior. Community-maintained wrapper components make it usable directly inside React, Vue, Angular, Ember, Svelte, and Stimulus.js applications without re-implementing the underlying picker logic.

What You Get

• A dependency-free datetime picker that attaches to any input and works from IE9 through modern browsers
• Single date, date-range, multiple-date, and time-only picker modes from one configuration object
• 51 bundled locales for internationalized date/time display
• Eight built-in themes, including dark and material variants, selectable via a single CSS import
• A plugin system with bundled plugins for month selection, week selection, labels, and confirm-date behavior
• Community-maintained framework wrapper components for React, Vue, Angular, Ember, Svelte, and Stimulus.js

Common Use Cases

• Replacing native <input type="date"> with a consistent, styled picker across all supported browsers
• Adding date-range selection to booking, filtering, or reporting UIs without a heavy calendar dependency
• Building multi-locale applications that need date pickers to render in the user’s own language and format
• Adding a lightweight time-only picker to forms that don’t need full calendar UI
• Integrating a themed date picker into a React/Vue/Angular/Ember app via a community wrapper component

Under The Hood

Architecture: The entire picker is implemented in a single ~3,000-line src/index.ts factory function that builds and manages the calendar DOM, event bindings, and internal date state per input instance, with supporting concerns split into src/utils/ (DOM helpers, date formatting, polyfills), src/l10n/ (locale definitions), and src/style/ (Stylus-based themes compiled to CSS); the bundled plugin system (src/plugins/monthSelect, weekSelect, labelPlugin, confirmDate) hooks into the same instance lifecycle rather than requiring a separate extension API. Tech Stack: TypeScript compiled via a custom build.ts script into multiple output targets (CommonJS, ESM, and UMD-style browser bundles) plus separate type declaration builds, with Stylus for theme source styling compiled down to plain CSS for distribution — no runtime framework or utility-library dependency at all. Code Quality: The core test suite is comparatively thin for a widely-used library — two top-level spec directories covering the main index.ts behavior, the range plugin, and the month-select plugin, run via Jest with TypeScript type-checking (test:typecheck) as a separate CI step; the project has had no commits since mid-2024, so quality is best assessed against its last stable release rather than ongoing activity. API Design: A single flatpickr(selector, options) call configures everything — mode, locale, theme CSS import, and plugins — which keeps integration to a few lines, and the plugin interface lets consumers add calendar behaviors (like month-only or week-only pickers) without forking the core rendering logic.