Vanilla JS datetime picker – Flatpickr – Update 2020

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.

Feature overview:

– 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.

Compatibility: IE9 and up, Edge, iOS Safari 6+, Chrome 8+, Firefox 6+.

Flatpickr - a great, lightweight, powerful vanilla JS datetimepicker
Flatpickr – a great, lightweight, powerful vanilla JS datetimepicker

Setup

npm i flatpickr --save

Start

// commonjs
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
flatpickr(element, {});

// Otherwise, selectors are also supported:
flatpickr("#myID", {});

// Multiple instances:
flatpickr(".anotherSelector");

// jQuery way:
$(".selector").flatpickr(optional_config);

Check out examples – they should answer all your questions about this solution:

https://flatpickr.js.org/examples/

License: MIT

Homepage / demos / docs
https://flatpickr.js.org/

GitHub

https://github.com/flatpickr/flatpickr

scraperapi

See also

angular2+-flatpickr addon

angularJS-flatpickr addon

ember-flatpickr addon

Preact Component

React Component

Stimulus.js Controller

Svelte Component

vue-flatpickr component

React Native datetime picker example – react-native-modal-datetime-picker

Date picker for React JS – react-day-picker

Detect mobile in JavaScript – Vue.js example

Enjoy && Happy coding!