flatpickr - javascript datetime picker

changes in this version:

Changes:

• use button for calendar dates - aria tags on span or div is not read by a screenreader and the navigation is easier with buttons.
• use buttons for calendar month arrows
• added tab trapping.

new config params changes

• toMonthOnOpen: true : If dialog is closed and the calendar is not on the month of the current date, go to month of the curent date when open.
• stopNoMoreDates: false : If "true" and there is a list of available dates stop navigation to next/prev month if no available dates and show a message
• noMoreDatesText: "No more available dates on {m} {y}" : actual message if navigation to next/prev month is trapped. m = month, y = year
• openOnFocus: If "true" - calendar open when input if focused, else kalender vil open on enter

Motivation

We need a more Universal Designed version of the calendar than the original

Compatibility

Edge, iOS Safari 6+, Chrome 8+, Firefox 6+ This version is not testet for IE

Install & Use

Demos and documentation for original: https://flatpickr.js.org

See also:

• angular2+-flatpickr addon
• angularJS-flatpickr addon
• ember-flatpickr addon
• Preact Component
• React Component
• Stimulus.js Controller
• Svelte Component
• vue-flatpickr component
• lit-flatpickr component

Supporting flatpickr

flatpickr will never change its license, pester users for donations, or engage in other user-hostile behavior.

Nevertheless, if you enjoyed working with this library or if its made your life easier, you can buy me a cup of coffee :)