flatpickr – A lightweight and Powerful DateTime Picker in TypeScript


The flatpickr DateTime JavaScript is one of the most known, and most used Scripts his kind. It is completely written in TypeScript and with some classList PolyFill Magic is it also compatible for 9+, 12+, 6+, 8+ and 6+. The Script doesn’t require any library, but is available for the libraries: React, Angular 2, AngularJS, Ember, Vue, Stimulus.js and Svelte.

flatpickr comes up in 50 different languages and with 8 colorful themes, and some optional plugins. The new Version also supports a DateRange Selection, the selection of multiple dates and Week Numbers. The UX-Design is simple and polished and still allows to disable specific dates, DateRanges or any other Date Logic. In Short: The most powerful, configurable and feature-rich DateTime Selector on the Web.

Download the latest version of flatpickr as .ZIP or as .TAR package!

npm i flatpickr --save

yarn add flatpickr --save

bower install flatpickr --save


The package itself is filled with a lot of files. First of all: The main JavaScript as well as the main Stylesheet are available, also in a minified version. The L10n folder contains all 54 locale files (as .ts and as .js file). The as “numerous” advertised plugins comes to a countable number of 7, and the 8 Themes are also available. Some TypeScript Stuff for the developers is also included.


Load flatpickr

Just load the main Stylesheet as well as the optional Theme Stylesheet directly within the Header of your HTML document. We recommend to load the main JavaScript, as well as the desired plugins, directly after the opened <body> tag.

<!DOCTYPE html>
        <meta charset="utf-8" />
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/flatpickr.css" />
        <!-- Optional Theme -->
        <link type="text/css" rel="stylesheet" href="/css/theme/theme.css" />
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/flatpickr.min.js"></script>


Configure flatpickr

The Script itself has many settings to configure the behavior and the output of this DateTime Picker. It’s highly recommended to check out the official documentation to find out more about this awesome DateTime Picker script!

document.addEventListener("DOMContentLoaded", {
    flatpickr(".flatpickr", {
        altFormat:          "F j, Y",
        altInput:           false,
        altInputCass:       "",
        allowInput:         false,
        appendTo:           null,
        ariaDateFormat:     "F j, Y",
        clickOpens:         true,
        dateFormat:         "Y-m-d",
        defaultDate:        null,
        defaultHour:        12,
        defaultMinute:      0,
        disable:            [],
        disableMobile:      false,
        enable:             [],
        enableTime:         false,
        enableSeconds:      false,
        formatDate:         null,
        hourIncrement:      1,
        inline:             false,
        maxDate:            null,
        minDate:            null,
        minuteIncrement:    5,
        mode:               "single",
        nextArrow:           ">",
        noCalendar:         false,
        onChange:           null,
        onClose:            null,
        onOpen:             null,
        onReady:            null,
        parsedate:          false,
        prevArrow:          "<",
        shorthandCurrentMonth: false,
        static:             false,
        time_24hr:          false,
        weekNumbers:        false,
        wrap:               false


Configure: Options

Exactly the same as date format, but for the altInput field
Show the user a readable date (as per altFormat), but return something totally different to the server.
This class will be added to the input element created by the altInput option. Note that altInput already inherits classes from the original input.
Allows the user to enter a date directly input the input field. By default, direct entry is disabled.
Instead of body, appends the calendar to the specified node instead.
Defines how the date will be formatted in the aria-label for calendar days, using the same tokens as dateFormat. If you change this, you should choose a value that will make sense if a screen reader reads it out loud.
Whether clicking on the input should open the picker. You could disable this if you wish to open the calendar manually with .open()
A string of characters which are used to define how the date will be displayed in the input box.
Sets the initial selected date(s). If you're using mode: "multiple" or a range calendar supply an Array of Date objects or an Array of date strings which follow your dateFormat. Otherwise, you can supply a single Date object or a date string
Initial value of the hour element.
Initial value of the minute element.
Allows to disable Dates.
Set disableMobile to true to always use the non-native picker. By default, flatpickr utilizes native datetime widgets unless certain options (e.g. disable) are used.
Allows to enable Dates.
Enables time picker
Enables seconds in the time picker.
Allows using a custom date formatting function instead of the built-in handling for date formats using dateFormat, altFormat, etc.
Adjusts the step for the hour input (incl. scrolling)
Displays the calendar inline
The maximum date that a user can pick to (inclusive).
The minimum date that a user can start picking from (inclusive).
Adjusts the step for the minute input (incl. scrolling)
"single", "multiple", or "range"
HTML for the arrow icon, used to switch months.
Hides the day selection in calendar. Use it along with enableTime to create a time picker.
Function(s) to trigger on every date selection.
Function(s) to trigger on every time the calendar is closed.
Function(s) to trigger on every time the calendar is opened.
Function to trigger when the calendar is ready.
Function that expects a date string and must return a Date object
HTML for the left arrow icon.
Show the month using the shorthand version (ie, Sep instead of September).
Position the calendar inside the wrapper and next to the input element. (Leave false unless you know what you're doing.
Displays time picker in 24 hour mode without AM/PM selection when enabled.
Enables display of week numbers in calendar.
Custom elements and input groups

Leave a Reply