Flatpickr is a lightweight, powerful Vanilla JS datetime picker with no dependencies. A very good solution. We use Flatpickr in our projects.
Flatpickr – powerful Vanilla JS datetime picker
Almost every large SPA or project involves date and time input. Browser’s native implementations of those are inconsistent and limited in functionality. Most other libraries require you to pull in heavy dependencies like jQuery, Bootstrap, and moment.js. I wanted something that was good-looking out of the box, dependency-free, powerful, and extensible.
– Dependency-free (no bloated bundles)
– Simple, polished UX
– Date + time input
– Range selections
– Display dates in a human-friendly format
– Ability to select multiple dates
– Can be used as just a time picker
– Easily disable specific dates, date ranges, or any date using arbitrary logic
– Week numbers
– 51 locales
– 8 colorful themes (incl. dark and material)
– Numerous plugins
– Libraries available for React, Angular, Vue, Ember, and more
Flatpickr provides more functionality at a fraction of the size of other libraries.
const flatpickr = require("flatpickr");
// es modules are recommended, if available, especially for typescript
import flatpickr from "flatpickr";
All of the following are valid ways to create flatpickr instance.
// If using flatpickr in a framework,
// its recommended to pass the element directly
// Otherwise, selectors are also supported:
// Multiple instances:
// jQuery way:
Check out examples – they should answer all your questions about this solution:
Strictly Necessary Cookies
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.