Options

Config Option Type Default Description
altFormat string "F j, Y" Exactly the same as date format, but for the altInput field
altInput Boolean false Show the user a readable date (as per altFormat), but return something totally different to the server.
altInputClass String "" 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 boolean false Allows the user to enter a date directly input the input field. By default, direct entry is disabled.
appendTo HTMLElement null Instead of body, appends the calendar to the specified node instead.
clickOpens boolean true Whether clicking on the input should open the picker. You could disable this if you wish to open the calendar manually with.open()
dateFormat string "Y-m-d" A string of characters which are used to define how the date will be displayed in the input box. The supported characters are defined in the table below.
defaultDate string null

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 Number 12

Initial value of the hour element.

defaultMinute Number 0

Initial value of the minute element.

disable array [] See Disabling dates
disableMobile Boolean false 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 array [] See Enabling dates
enableTime boolean false Enables time picker
enableSeconds boolean false Enables seconds in the time picker.
hourIncrement integer 1 Adjusts the step for the hour input (incl. scrolling)
inline boolean false Displays the calendar inline
maxDate String/Date null The maximum date that a user can pick to (inclusive).
minDate String/Date null The minimum date that a user can start picking from (inclusive).
minuteIncrement integer 5 Adjusts the step for the minute input (incl. scrolling)
mode String "single" "single""multiple", or "range"
nextArrow string > HTML for the arrow icon, used to switch months.
noCalendar boolean false Hides the day selection in calendar.
Use it along with enableTime to create a time picker.
onChange function, [functions] null Function(s) to trigger on every date selection. See Events API
onClose function, [functions] null Function(s) to trigger on every time the calendar is closed. See Events API
onOpen function, [functions] null Function(s) to trigger on every time the calendar is opened. See Events API
onReady function, [functions] null Function to trigger when the calendar is ready. See Events API
parseDate function false Function that expects a date string and must return a Date object
prevArrow string < HTML for the left arrow icon.
shorthandCurrentMonth boolean false Show the month using the shorthand version (ie, Sep instead of September).
static boolean false Position the calendar inside the wrapper and next to the input element. (Leavefalseunless you know what you're doing.
time_24hr boolean false Displays time picker in 24 hour mode without AM/PM selection when enabled.
weekNumbers boolean false Enables display of week numbers in calendar.
wrap Boolean false Custom elements and input groups