Skip to content
Get packs

Guide · Open source

How to use flatpickr: install, configure and add a date picker

Updated · written with AI from the project's own documentation and checked against our catalogue data

flatpickr is an open-source JavaScript library that adds a date and time picker to a web page, so visitors choose dates from a calendar popup instead of typing them. It is written in TypeScript, released under the MIT licence, and the project describes it as having no dependencies. This guide explains what it does, how to get it, the features the README lists, and when a native browser input or another library is the better choice.

flatpickrflatpickr/flatpickr · ★ 16.5k · MIT

Quick start

  1. 1Read the documentation. Open flatpickr.js.org to read the demos and current setup instructions.
  2. 2Get the code. Clone the repository with the git command shown in the README, or install it through your package manager as described in the docs.
  3. 3Include the library. Load flatpickr in your page before the script that uses it.
  4. 4Attach it to an input. Initialise the picker on a text input element using the documented setup.
  5. 5Pick a mode. Enable time, range or multiple-date selection depending on what your form needs.
  6. 6Set locale and theme. Choose one of the 51 locales and one of the 8 themes that suit your site.
  7. 7Test in your target browsers. Check the picker in every browser your visitors use, including older ones within the listed range.

What flatpickr does and why people use it

flatpickr replaces a plain text field for dates and times with a calendar popup. The README says browser-native date inputs are inconsistent and limited in functionality, which is the main reason the project was built.

It does not require jQuery, Bootstrap or moment.js. The author describes it as good-looking out of the box, dependency-free, powerful and extensible.

  • Date and time input
  • Range selection and selection of multiple dates
  • Use as only a time picker
  • Human-friendly date display
  • Disable specific dates, date ranges or any date using arbitrary logic
  • Week numbers
  • 51 locales
  • 8 themes, including dark and material

Install flatpickr

The README's install section links to the demos and documentation at flatpickr.js.org. The README's command shown for getting the code is a git clone of the repository. The README lists no prerequisites.

Check the homepage for the current package installation instructions before adding it to your project.

git clone https://github.com/flatpickr/flatpickr

Add a date picker to a page

Once flatpickr is included in your page, attach it to an input element. The README does not include a usage snippet, so follow the examples on the official documentation site for the exact setup code.

A picker is normally attached to a text input. The calendar opens when the visitor interacts with that field.

  • Confirm the library loads before your own script runs.
  • Start with a single date input, then add options such as time or ranges.

Choose the right mode: date, time, range or multiple dates

flatpickr supports date and time input, range selection and selection of multiple dates. It can also be used only as a time picker.

Pick the mode that matches your form. A booking form usually needs a range, while a scheduling form may need only a time.

  • Date and time: one field for both values
  • Range: start and end dates
  • Multiple: several separate dates
  • Time only: hours and minutes without a calendar

Localise and style the picker

The README lists 51 locales, so a site can show the calendar in many languages. It also lists 8 themes, including dark and material styles, and week numbers can be shown.

Choose a locale and theme that match your site's language and design, and test the result with real users.

Know the browser support and limits

The README lists this compatibility: IE9 and up, Edge, iOS Safari 6+, Chrome 8+ and Firefox 6+. Older browsers outside this range are not a good fit.

flatpickr is not the right tool when a plain browser date field is enough, because native inputs need no library. The README also notes that framework components for React, Vue and others are separate community projects, not part of the core library.

  • Use a native date input if you only need simple date entry.
  • Use a community wrapper for React, Angular, Vue, Ember, Svelte and similar frameworks.
  • Check the browser list against your audience before you commit.

What people use it for

  • Booking forms that let visitors pick a check-in and check-out range
  • Scheduling forms that need only a time of day
  • Filters in dashboards where users select several specific dates
  • Multilingual sites that show the calendar in the visitor's language
  • Single-page apps that need a date input without adding jQuery or Bootstrap

Frequently asked questions

Is flatpickr free to use?

flatpickr is released under the MIT licence, as shown in the repository. The README states that the project will never change its licence. Check the LICENSE file in the repository for the full terms.

Does flatpickr need jQuery, Bootstrap or moment.js?

No. The README describes flatpickr as dependency-free and says it does not require jQuery, Bootstrap or moment.js.

What browsers does flatpickr support?

The README lists IE9 and up, Edge, iOS Safari 6+, Chrome 8+ and Firefox 6+. Test your target browsers before you rely on it.

Can flatpickr select a date range?

Yes. The README lists range selections and selection of multiple dates as features.

Is there a React or Vue version of flatpickr?

The README points to separate community wrappers for React, Angular, Vue, Ember, Svelte and others. These are not part of the core library, so check each project's own documentation.

What are alternatives to flatpickr?

The comparable projects listed are Pikaday, Litepicker, Air-datepicker and react-datepicker. Compare them on features, size and framework fit before choosing.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

flatpickr suits web developers who need a feature-rich, dependency-free date or time picker with range selection and many locales. If you only need a simple date field, a native browser input is enough, and if you use React or another framework and want a component, look at the community wrappers or a framework-specific alternative.

Install options & downloads