React Flatpickr - Overview (O11)

Stable version 1.0.3 (Compatible with OutSystems 11)

Uploaded

on 27 Oct (11 hours ago)

5.0

(2 ratings)

Details

A Reactive Web date, time and range picker block built on flatpickr v4.6.13, covering every capability shown on flatpickr.js.org/examples through block parameters, with no JavaScript needed in your app. - Single, multiple and range selection, with an optional time picker (12/24-hour, seconds, steps, min/max time) or a time-only picker - Human-friendly display formats, preloaded dates, min/max dates, disabled dates and ranges, disabled week days, or only specific dates enabled - Week numbers, inline calendar, several months side by side, static positioning for popups - 65 built-in locales and 8 themes (light, dark, material, airbnb, confetti) - 7 official plugins: range with two inputs, confirm button, week select, month select, per-day time limits, mouse-wheel scroll, accessible label - AdvancedOptions to pass any other flatpickr option as JSON - 5 events (SelectedDates, Initialized, Opened, Closed, MonthYearChanged) - 8 client actions to open, close, clear, set dates, change month or change options from your own logic Everything ships inside the module, so the picker works without internet access. It works alongside OutSystems UI's own DatePicker without layout clashes. A demo app shows every feature on a live card.

flatpickr is a lightweight and powerful datetime picker.

Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event system make it suitable for any environment.

This “lean” philosophy translates to less size and better performance, with a bonus of not having to load 8 libraries for a calendar.

Dive right into it in the next section.

Release notes (1.0.3)

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.

License (1.0.3)

BSD-3 license (https://opensource.org/licenses/BSD-3-Clause)

Reviews (1)