# flatpickr/flatpickr

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/flatpickr-flatpickr).**

16,456 stars · 1,467 forks · TypeScript · mit

## Links

- GitHub: https://github.com/flatpickr/flatpickr
- Homepage: https://flatpickr.js.org
- awesome-repositories: https://awesome-repositories.com/repository/flatpickr-flatpickr.md

## Topics

`date` `datepicker` `daterange` `daterangepicker` `datetime` `datetime-picker` `timepicker`

## Description

Flatpickr is a lightweight, dependency-free JavaScript library designed to provide a modular date and time selection interface for web applications. It functions as a versatile web component that integrates into existing forms, offering a consistent user experience for picking single dates, ranges, or multiple values while maintaining a clear separation between human-readable display strings and machine-readable data.

The library distinguishes itself through a robust configuration-driven architecture that allows for dynamic runtime updates and extensive customization of date formatting via a token-based engine. It prioritizes accessibility and usability by automatically detecting mobile environments to swap the custom interface for native browser pickers, while simultaneously providing developers with granular control over selection constraints, including date blacklisting, whitelisting, and boundary enforcement.

Beyond core selection, the project supports a wide range of functional requirements such as internationalization, visual theming, and lifecycle management through event hooks. It accommodates diverse integration needs by offering support for legacy browsers, jQuery plugins, and custom DOM element attachment, ensuring that the calendar can be rendered either as a standard popup or as an inline element within a page layout.

## Tags

### User Interface & Experience

- [Date and Time Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers.md) — Provides a lightweight interface for users to choose specific dates and times from a calendar or clock input. ([source](https://cdn.jsdelivr.net/gh/flatpickr/flatpickr@master/README.md))
- [Date Selection Components](https://awesome-repositories.com/f/user-interface-experience/date-selection-components.md) — Links two separate input fields to allow users to define a start and end date by selecting from the interface. ([source](https://flatpickr.js.org/plugins/))
- [Selection Constraints](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers/selection-constraints.md) — Enables granular control over selectable dates by allowing developers to blacklist specific days or ranges to prevent invalid user input. ([source](https://flatpickr.js.org/examples/))
- [Date Range Schedulers](https://awesome-repositories.com/f/user-interface-experience/date-range-schedulers.md) — Enables users to define start and end dates across single or multiple input fields for booking and planning workflows.
- [Native Fallbacks](https://awesome-repositories.com/f/user-interface-experience/mobile-interfaces/native-fallbacks.md) — Detects mobile environments to swap the custom JavaScript interface for native browser date pickers while preserving underlying data constraints.
- [Modular UI Components](https://awesome-repositories.com/f/user-interface-experience/modular-ui-components.md) — Integrates into existing forms as a modular interface element to provide consistent date and time input.
- [Mobile Input Optimization](https://awesome-repositories.com/f/user-interface-experience/mobile-interfaces/mobile-input-optimization.md) — Switches to native date and time pickers on mobile devices to provide a familiar user experience. ([source](https://flatpickr.js.org/mobile-support/))
- [Mobile-Optimized Pickers](https://awesome-repositories.com/f/user-interface-experience/mobile-optimized-pickers.md) — Optimizes date input experiences by switching to native mobile pickers while maintaining consistent behavior across desktop browsers.
- [Multiple Selection](https://awesome-repositories.com/f/user-interface-experience/date-selection-components/multiple-selection.md) — Allows users to pick several individual dates or a continuous range of dates within a single calendar instance. ([source](https://flatpickr.js.org/examples/))
- [Inline Rendering](https://awesome-repositories.com/f/user-interface-experience/calendar-visualization-components/inline-rendering.md) — Supports rendering the interface in an always-visible state on the page instead of as a popup. ([source](https://flatpickr.js.org/examples/))
- [Date Input Validation](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/form-validation/date-input-validation.md) — Restricts user date selection through minimum and maximum boundaries or custom logic to ensure data integrity.
- [Input Decouplers](https://awesome-repositories.com/f/user-interface-experience/input-field-enhancements/multilingual-input-fields/input-decouplers.md) — Maintains a hidden machine-readable data field alongside a human-readable display input to ensure consistent formatting.

### Development Tools & Productivity

- [Frontend Formatters](https://awesome-repositories.com/f/development-tools-productivity/date-formatting-utilities/frontend-formatters.md) — Parses and displays date strings in custom formats while maintaining machine-readable values for application logic.
- [Input Formatters](https://awesome-repositories.com/f/development-tools-productivity/date-formatting-utilities/input-formatters.md) — Configures how dates are parsed and displayed to users, including support for international standards and human-readable alternative input fields. ([source](https://flatpickr.js.org/updating-from-v2/))
- [Human-Readable Formatters](https://awesome-repositories.com/f/development-tools-productivity/date-formatting-utilities/human-readable-formatters.md) — Displays user-friendly date strings in the input field while maintaining machine-readable formats in the underlying data field. ([source](https://flatpickr.js.org/examples/))
- [Token-Based Formatters](https://awesome-repositories.com/f/development-tools-productivity/date-formatting-utilities/token-based-formatters.md) — Parses and serializes date objects using a custom pattern-matching engine that maps specific character tokens to date and time components.
- [Date String Parsers](https://awesome-repositories.com/f/development-tools-productivity/date-and-time-utilities/relative-date-formatting/date-string-parsers.md) — Converts date strings or timestamps into standard date objects for programmatic use within application logic. ([source](https://flatpickr.js.org/instance-methods-properties-elements/))
- [Date Formatting Utilities](https://awesome-repositories.com/f/development-tools-productivity/date-formatting-utilities.md) — Converts date objects into string representations based on provided patterns to ensure consistent display. ([source](https://flatpickr.js.org/instance-methods-properties-elements/))

### Data & Databases

- [Internationalization](https://awesome-repositories.com/f/data-databases/date-and-time-libraries/internationalization.md) — Adapts date and time displays to specific languages and regional conventions to ensure global usability.
- [Date and Time Libraries](https://awesome-repositories.com/f/data-databases/date-and-time-libraries.md) — Adapts date and time displays to specific languages and regional conventions by applying predefined or custom locale settings. ([source](https://flatpickr.js.org/localization/))

### Web Development

- [Date and Time Formatting](https://awesome-repositories.com/f/web-development/date-and-time-formatting.md) — Transforms date and time values into custom string representations using a wide range of tokens for calendar units. ([source](https://flatpickr.js.org/formatting/))

### Software Engineering & Architecture

- [Lifecycle Event Hooks](https://awesome-repositories.com/f/software-engineering-architecture/lifecycle-event-hooks.md) — Allows developers to execute custom logic during lifecycle events like opening, closing, or selecting dates. ([source](https://flatpickr.js.org/options/))