The flatpickr Instance

Retrieving the flatpickr instance

You may store the instance by assigning the result of an invocation to a variable.

Here are a few ways to do it.

const fp = flatpickr("#myID", {}); // flatpickr
const myInput = document.querySelector(".myInput");
const fp = flatpickr(myInput, {});  // flatpickr
const calendars = flatpickr(".calendar", {});
calendars[0] // flatpickr

And if you’ve forgot to save the instance to a variable

flatpickr("#myInput", {}); // invocation without saving to a var
// ...

const fp = document.querySelector("#myInput")._flatpickr;


Once you’ve got the instance in say fp, accessing props is as simple as e.g. fp.currentYear


The array of selected dates (Date objects).


The year currently displayed on the calendar.


The zero-indexed month number (0-11) currently displayed on the calendar.


The configuration object (defaults + user-specified options).


changeMonth(monthNum, is_offset = true)

Changes the current month.

let calendar = flatpickr(yourElement, config);
calendar.changeMonth(1); // go a month ahead
calendar.changeMonth(-2); // go two months back

calendar.changeMonth(0, false); // go to January


Resets the selected dates (if any) and clears the input.


Closes the calendar.


Destroys the flatpickr instance, cleans up - removes event listeners, restores inputs, etc.

formatDate(dateObj, formatStr)

dateObj is a Date, and formatStr is a string consisting of formatting tokens.

Return Value A string representation ofdateObj,  formatted as per formatStr

jumpToDate(date, triggerChange)

Sets the calendar view to the year and month of date, which can be a date string, a Date, or nothing.

Ifdateis undefined, the view is set to the latest selected date, the minDate, or today’s date

If triggerChange is set to true, the onMonthChange and onYearChange hooks are triggered, but only if the new values differ.


Shows/opens the calendar.

parseDate(dateStr, dateFormat)

Parses a date string or a timestamp, and returns a Date.


Redraws the calendar. Shouldn’t be necessary in most cases.

set(option, value)

Sets a config option optionto value, redrawing the calendar and updating the current view, if necessary.

setDate(date, triggerChange, dateStrFormat)

Sets the current selected date(s) todate, which can be a date string, a Date, or anArray of the Dates.

Optionally, pass true as the second argument to force any onChange events to fire. And if you’re passing a date string with a format other than your dateFormat, provide a dateStrFormat e.g. "m/d/Y".


Shows/opens the calendar if its closed, hides/closes it otherwise.



The text input element associated with flatpickr.


Self-explanatory. This is the div.flatpickr-calendar element.


The “left arrow” element responsible for decrementing the current month.


The “right arrow” element responsible for incrementing the current month.


The span holding the current month’s name.


The input holding the current year.


The container for all the day elements.

Useful static methods

flatpickr exposes its date parser and formatter which doesn’t require an instance to work.

While not as powerful as say moment.js, they’re functional enough to replace it in most of the basic usecases.

flatpickr.parseDate(dateStr, dateFormat)

Returns a Date object.

flatpickr.parseDate("2016-10-20", "Y-m-d")

Thu Oct 20 2016 00:00:00

flatpickr.parseDate("31/01/1995", "d/m/Y")

Tue Jan 31 1995 00:00:00

flatpickr.formatDate(dateObj, dateFormat)

flatpickr.formatDate(new Date(), "Y-m-d h:i K")

“2017-04-24 11:56 AM”