Built on flatpickr v4.6.13. The Flatpickr block now covers every capability shown on flatpickr.js.org/examples. A demo app (FlatpickrDemo) shows each feature on a live card.
NEW BLOCK PARAMETERS
- Time: EnableTime, EnableSeconds, NoCalendar (time picker only), Time24hr, MinTime, MaxTime, DefaultHour, DefaultMinute, HourIncrement, MinuteIncrement
- Preloaded dates: DefaultDate ("today", a date, a comma separated list or a JSON array)
- Limiting dates: DisableDates (dates and from/to ranges), EnableDates, DisableWeekDays (e.g. "0,6" for weekends)
- Display: WeekNumbers, Inline, ShowMonths, MonthSelectorType, ShorthandCurrentMonth, Position, Static
- Localization: Locale (65 built-in languages, no internet access needed), FirstDayOfWeek
- Themes: Theme (default, dark, material_blue, material_green, material_red, material_orange, airbnb, confetti)
- Input: AllowInput, ClickOpens, DisableMobile, Conjunction, Placeholder, IsDisabled, ExtendedClass
- Plugins: Plugins (range, confirmDate, weekSelect, monthSelect, minMaxTime, scroll, label), PluginOptions, RangeSecondInputId
- AdvancedOptions: a JSON object passed straight to flatpickr, for any option not listed above
NEW EVENTS
- Initialized (WidgetId), Opened, Closed, MonthYearChanged (Month, Year)
- SelectedDates is now optional
NEW PUBLIC CLIENT ACTIONS
- Flatpickr_Open, Flatpickr_Close, Flatpickr_Toggle, Flatpickr_Clear, Flatpickr_SetDate, Flatpickr_JumpToDate, Flatpickr_ChangeMonth, Flatpickr_SetOption
- Each takes the WidgetId from the Initialized event
IMPROVEMENTS
- Changing a block parameter rebuilds the picker and keeps the user's selection
- The picker is cleaned up when the block is removed from the page
- The visible input created by AltFormat now gets the original input's classes (full width, plus ExtendedClass)
BUG FIXES
- MaxDate was using MinDate's value
- EnableTime could not be turned on (it was a local variable)
- SelectedDates could fail when a range had only one date or the selection was cleared; StartDate/EndDate now return NullDate when cleared
- The dark theme was always loaded, whatever the setting
- Calendars showed 8 days per row in apps using OutSystems UI, whose DatePicker CSS also applies to this component's calendars
BEHAVIOUR CHANGES (please review when upgrading)
- The Theme default is "dark", so existing screens keep their look. Set it to "default" for the light calendar. The theme applies to every picker on the page.
- EnableTime no longer turns on seconds automatically. Use EnableSeconds.
Add event handler to get
- Start Date
- End Date
- Date List
Add config for flatpickr configuration (ref: https://flatpickr.js.org/options/)