Welcome to Svelte Flatpickr Plus

Flatpickr is a lightweight and powerful datetime picker. Svelte Flatpickr Plus is a wrapper for Flatpickr with some extra features.

What is difference from Svelte Flatpickr ?

Svelte Flatpickr Plus is just a svelte actions that you can using with use:action directive of svelte on input element with any class or style
You can using your locale years (e.g. Buddhist Era) with useLocaleYear option.
You can setting a reset behavior with resetMoveDefault and resetToDefault option.
On a calendar, year input has been replace with year dropdown element for easy to select year.
Have theme changer plugin to calling and change a theme of calendar while theme has been changed.

Actions🔗

Svelte Flatpickr Plus coming with 4 actions

Basic Usage🔗

Date Picker

Code

<input use:datePicker placeholder="please select date" readonly />

Month Picker

Code

<input use:monthPicker placeholder="please select month" readonly />

Date Range Picker

Code

<input use:dateRangePicker placeholder="please select date range" readonly />

Month Range Picker

Code

<input use:monthRangePicker placeholder="please select month range" readonly />

Options 🔗

Config Option	Default	Type	Description
allowInput	true	Boolean	Allows the user to enter a date directly input the input field. By default, direct entry is disabled.
allowInvalidPreload	false	Boolean	Allow preloading of invalid date.
altFormat	"F j, Y"	String	Exactly the same as date format, but for the altInput field.
altInput	false	Boolean	Show the user a readable date (as per altFormat), but return something totally different to the server.
altInputClass	null	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.
ariaDateFormat	"F j, Y"	String	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.
autoFillDefaultTime	true	Boolean	Whether the default time should be auto-filled when the input is empty and gains or loses focus.
clickOpens	true	Boolean	Whether clicking on the input should open the picker. Set it to false if you only want to open the calendar programmatically.
closeOnSelect	true	Boolean	Whether calendar should close after date selection.
conjunction	", "	String	If "mode" is "multiple", this string will be used to join selected dates together for the date input value.
dateFormat	"Y-m-d"	String	A string of characters which are used to define how the date will be displayed in the input box. (See supported format)
defaultDate	null	Date \| string \| number	The initial selected date(s).
defaultHour	12	Number	Initial value of the hour element, when no date is selected.
defaultMinute	0	Number	Initial value of the minute element, when no date is selected.
defaultSeconds	0	Number	Initial value of the seconds element, when no date is selected.
disable	[]	Date \| string \| number \| function	Disables certain dates, preventing them from being selected. (See detail of enabling & disabling dates)
disableMobile	true	Boolean	Set this to true to always use the non-native picker on mobile devices. (By default is set to true to off a mobile mode for working with month plugin & year dropdown plugin)
enable	[]	Date \| string \| number \| function	Disables all dates except these specified. (See detail of enabling & disabling dates)
enableSeconds	false	Boolean	Enables seconds selection in the time picker.
enableTime	false	Boolean	Enables the time picker.
inline	false	Boolean	Displays the calendar inline.
locale	"default"	LocaleKey \| Partial<CustomLocale>	The locale, either as a string (e.g. "ru", "en") or as an object. (See Localization)
maxDate	null	Date \| string \| number	The maximum date that a user can pick to (inclusive) and this will extended a maximum year you can select in year dropdown if it greater than current year.
maxTime	null	Date \| string \| number	The maximum time that a user can pick to (inclusive).
minDate	null	Date \| string \| number	The minimum date that a user can start picking from (inclusive).
minTime	null	Date \| string \| number	The minimum time that a user can start picking from (inclusive).
minuteIncrement	5	number	Adjusts the step for the minute input (incl. scrolling).
monthSelectorType	"dropdown"	"dropdown" \| "static"	How the month selector in the calendar should be shown.
position	"auto"	"auto" \| "above" \| "below" \| "auto left" \| "auto center" \| "auto right" \| "above left" \| "above center" \| "above right" \| "below left" \| "below center" \| "below right"	How the calendar should be positioned with regards to the input.
positionElement	undefined	HTMLElement	The element to use as the position reference for the calendar.
shorthandCurrentMonth	false	Boolean	Enables the use of shorthand for the current month.
static	false	Boolean	Enables the calendar to be displayed statically.
time_24hr	false	Boolean	Enables the use of 24-hour time format.
weekNumbers	false	Boolean	Enables the display of week numbers.
wrap	false	Boolean	Custom elements and input groups
useLocaleYear	false	Boolean	Enables the use of the locale-specific year format.(e.g. Buddhist Era)
resetMoveDefault	true	Boolean	On resets the calendar, move a calendar back to the default date/time.
resetToDefault	true	Boolean	On resets the calendar, set the default date/time to input element.