Options
type support
You can import a type from svelte-flatpickr-plus/types by default it will export all options in a table below, for additional you can import Hook type for using it in callback of hook or event
Year dropdown default
By default a year dropdown will set maximum year as next year
In this page will have all options that you can passing into a action that you imported
| Config Option | Default | Type | Description |
|---|---|---|---|
| allowInput | false | 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" / "F Y" (for monthPicker) | 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" / "F Y" (for monthPicker) | 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 | "F j, Y" / "F Y" (for monthPicker) | 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. |
| isMonthPicker | false | Boolean | Set this to true will change a date picker into a month picker. |
| locale | "default" | LocaleKey , Partial<CustomLocale> | The locale, either as a string (e.g. "ru", "en") or as an object. ( See Localization ) |
| maxDate | new Date(new Date().getFullYear() + 1, 11, 31) | 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 next 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). |
| mode | "single" | "single", "multiple", "range", "time" | Date selection mode. |
| 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. |