flatpickr – A lightweight and Powerful DateTime Picker in TypeScript

flatpickr

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

Instructions

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>
<html>
    <head>
        <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" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/flatpickr.min.js"></script>
    </body>
</html>

 

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

altFormat
Exactly the same as date format, but for the altInput field
altInput
Show the user a readable date (as per altFormat), but return something totally different to the server.
altInputClass
This class will be added to the input element created by the altInput option. Note that altInput already inherits classes from the original input.
allowInput
Allows the user to enter a date directly input the input field. By default, direct entry is disabled.
appendTo
Instead of body, appends the calendar to the specified node instead.
ariaDateFormat
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.
clickOpens
Whether clicking on the input should open the picker. You could disable this if you wish to open the calendar manually with .open()
dateFormat
A string of characters which are used to define how the date will be displayed in the input box.
defaultDate
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
defaultHour
Initial value of the hour element.
defaultMinute
Initial value of the minute element.
disable
Allows to disable Dates.
disableMobile
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.
enable
Allows to enable Dates.
enableTime
Enables time picker
enableSeconds
Enables seconds in the time picker.
formatDate
Allows using a custom date formatting function instead of the built-in handling for date formats using dateFormat, altFormat, etc.
hourIncrement
Adjusts the step for the hour input (incl. scrolling)
inline
Displays the calendar inline
maxDate
The maximum date that a user can pick to (inclusive).
minDate
The minimum date that a user can start picking from (inclusive).
minuteIncrement
Adjusts the step for the minute input (incl. scrolling)
mode
"single", "multiple", or "range"
nextArrow
HTML for the arrow icon, used to switch months.
noCalendar
Hides the day selection in calendar. Use it along with enableTime to create a time picker.
onChange
Function(s) to trigger on every date selection.
onClose
Function(s) to trigger on every time the calendar is closed.
onOpen
Function(s) to trigger on every time the calendar is opened.
onReady
Function to trigger when the calendar is ready.
parseDate
Function that expects a date string and must return a Date object
prevArrow
HTML for the left arrow icon.
shorthandCurrentMonth
Show the month using the shorthand version (ie, Sep instead of September).
static
Position the calendar inside the wrapper and next to the input element. (Leave false unless you know what you're doing.
time_24hr
Displays time picker in 24 hour mode without AM/PM selection when enabled.
weekNumbers
Enables display of week numbers in calendar.
wrap
Custom elements and input groups

Leave a Reply

Top