How to install flatpickr, wire up your first picker, and configure the options most forms actually need.
CDN (fastest):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>npm:
npm install flatpickrimport flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css";<input class="date" placeholder="Select date...">
<script> flatpickr(".date", {}); </script>flatpickr accepts a CSS selector, a DOM element, or a list of elements. Every example on this site is a live instance — start from the one closest to your use case:
| Option | What it does | Example |
|---|---|---|
mode | Selection mode: single, multiple or range | "range" |
enableTime | Show time controls | true |
noCalendar | Hide the calendar (time-only picker) | true |
dateFormat | Format of the submitted value | "Y-m-d H:i" |
altInput / altFormat | Show a human-friendly format to the user while submitting another | altFormat: "F j, Y" |
minDate / maxDate | Limit the selectable range | minDate: "today" |
disable | Disable specific dates, ranges, or dates matching a function | disable: ["2026-12-25"] |
inline | Render the calendar in the page, always visible | true |
locale | Language / regional formatting (51 locales ship with flatpickr) | "de", "zh" |
defaultDate | Pre-selected date when the picker opens | "2026-11-16" |
Does flatpickr need jQuery or any other library?
No — it is dependency-free, which is its main selling point over older pickers.
How big is it?
The v4.6.13 minified build served on this site is about 50 KB of JS and 16 KB of CSS (uncompressed).
Can I change the colours?
Yes — eight themes ship in dist/themes/ (airbnb, confetti, dark, light and four material colours), or override the CSS variables/classes yourself.
Which browsers are supported?
Per the upstream README: IE9+, Edge, iOS Safari 6+, Chrome 8+, Firefox 6+.
Is this the official site?
No. This is an independent demo mirror of the MIT-licensed library; the official documentation lives at flatpickr.js.org and the source at github.com/flatpickr/flatpickr.