Stable version 1.0.3 (Compatible with OutSystems 11)

Uploaded

on 27 Oct (14 hours ago)

5.0

(2 ratings)

Documentation

1.0.3

Overview

The Flatpickr block is a Reactive Web date, time and range picker built on flatpickr v4.6.13. It covers every capability on the flatpickr examples page through block parameters, so no JavaScript is needed in your app.

What	Count	Where
Block parameters	39	Block `Flatpickr`
Events	5	Block `Flatpickr`
Public client actions	8	Module `Flatpickr_Pat`
Plugins	7	Built in, enabled with `Plugins`
Locales	65	Built in, chosen with `Locale`
Themes	8	Chosen with `Theme`

Everything ships inside the module, including locales, plugins and themes, so the picker works without internet access. The FlatpickrDemo app shows every feature on a live card.

Getting started

A working picker takes four steps and no code.

In Service Studio, open Manage Dependencies and add from Flatpickr_Pat:
- the block Flatpickr;
- the Flatpickr_* client actions, if you want to control the picker from your own buttons.
Drag the Flatpickr block onto your screen.
Set the parameters you need. For example, a date range with a readable format:
- Mode = "range"
- AltFormat = "M j, Y"
- Theme = "default"
Handle the SelectedDates event: create a screen action with inputs StartDate, EndDate (Date Time) and DateList (Date Time List), and assign them to your variables.

The value the picker stores is always Y-m-d (or Y-m-d H:i:S with time), so it converts cleanly to OutSystems dates. AltFormat only changes what the user sees.

Block parameters

All 39 parameters are optional. Text values that take lists accept a comma separated list or a JSON array.

Parameter	Type	Default	What it does
Mode	Text	"single"	"single", "multiple" or "range"
AltFormat	Text		Display format, e.g. "F j, Y". The stored value stays Y-m-d
MinDate	Date		Earliest selectable date
MaxDate	Date		Latest selectable date
DefaultDate	Text		Preloaded date(s): "today", "2026-10-27", "2026-10-27 13:45", a list or JSON array. Use 2 dates in range mode
DisableDates	Text		Dates that can't be picked: list or JSON array of dates and {"from", "to"} ranges
EnableDates	Text		Only these dates can be picked. Same format as DisableDates
DisableWeekDays	Text		Week days that can't be picked, 0 = Sunday to 6 = Saturday, e.g. "0,6"
EnableTime	Boolean	False	Adds a time picker
EnableSeconds	Boolean	False	Adds seconds to the time picker
NoCalendar	Boolean	False	Time picker only (implies EnableTime)
Time24hr	Boolean	False	24-hour clock, no AM/PM
MinTime	Text		Earliest time, e.g. "09:00"
MaxTime	Text		Latest time, e.g. "17:30"
DefaultHour	Integer	12	Initial hour
DefaultMinute	Integer	0	Initial minute
HourIncrement	Integer	1	Hour step
MinuteIncrement	Integer	5	Minute step
WeekNumbers	Boolean	False	Shows ISO week numbers
Inline	Boolean	False	Calendar always visible below the input
ShowMonths	Integer	1	Months shown side by side
MonthSelectorType	Text	"dropdown"	"dropdown" or "static"
ShorthandCurrentMonth	Boolean	False	Jan instead of January
Position	Text	"auto"	auto, above or below, optionally + left, center or right
Static	Boolean	False	Calendar inside the input wrapper; use in popups and modals
Locale	Text	"default"	Language code, see Localization
FirstDayOfWeek	Integer	-1	0 = Sunday to 6 = Saturday; -1 uses the locale
Theme	Text	"dark"	See Themes. Applies to every picker on the page
AllowInput	Boolean	False	User can type a date
ClickOpens	Boolean	True	False = open only with Flatpickr_Open
DisableMobile	Boolean	False	Use flatpickr instead of the native picker on phones
Conjunction	Text	", "	Separator in multiple mode
Plugins	Text		Comma separated plugin names, see Plugins
PluginOptions	Text		JSON object with options per plugin
RangeSecondInputId	Text		Id of a second input for the range plugin
AdvancedOptions	Text		JSON object with any other flatpickr option, applied last
Placeholder	Text		Input placeholder
IsDisabled	Boolean	False	Disables the input
ExtendedClass	Text		Extra CSS classes on the input

Events

All five events are optional.

Event	Parameters	When it fires
SelectedDates	StartDate, EndDate (Date Time), DateList (Date Time List)	The selection changes. StartDate and EndDate are the first and last selected dates, or NullDate when cleared
Initialized	WidgetId (Text)	The picker is created, and again after a parameter change. Store WidgetId for the client actions
Opened		The calendar opens
Closed		The calendar closes
MonthYearChanged	Month (Integer, 1–12), Year (Integer)	The shown month or year changes

In range mode, SelectedDates also fires after the first click, with one date. Check DateList.Length = 2 before treating the range as complete.

Client actions

The client actions control a picker from anywhere on the screen. Each one takes the WidgetId that the Initialized event returns.

Add a local variable, e.g. PickerId (Text).
Handle Initialized and assign PickerId = WidgetId.
Call any action below with WidgetId = PickerId.

Action	Parameters	What it does
Flatpickr_Open	WidgetId	Opens the calendar
Flatpickr_Close	WidgetId	Closes the calendar
Flatpickr_Toggle	WidgetId	Opens or closes the calendar
Flatpickr_Clear	WidgetId, TriggerChange (default True)	Clears the selection
Flatpickr_SetDate	WidgetId, Dates, TriggerChange (default True)	Selects date(s): "today", "2026-10-27", a list or JSON array
Flatpickr_JumpToDate	WidgetId, Date	Shows a month without selecting, e.g. "2026-12-01"
Flatpickr_ChangeMonth	WidgetId, Month, IsOffset (default True)	Moves by Month months, or to month index 0–11 when IsOffset = False
Flatpickr_SetOption	WidgetId, Option, Value	Changes one flatpickr option at runtime, e.g. Option = "maxDate", Value = "2026-12-31". JSON values are parsed

With TriggerChange = True, the SelectedDates event fires after the change.

Plugins

Turn plugins on with Plugins (comma separated) and configure them with PluginOptions, a JSON object keyed by plugin name.

Plugin	What it does	Typical settings
range	Start date in the picker, end date in a second input	`RangeSecondInputId` = the second input's Id. Empty = the plugin creates one
confirmDate	Adds a confirm button	`{"confirmDate": {"confirmText": "Done ", "showAlways": false}}`
weekSelect	Selects a whole week	`AltFormat` = `"\W\e\e\k #W, Y"` shows "Week #44, 2026"
monthSelect	Picks a month instead of a day	`{"monthSelect": {"shorthand": true, "dateFormat": "Y-m-d", "altFormat": "F Y"}}` with `AltFormat` = `"F Y"`
minMaxTime	Different time limits per day	`{"minMaxTime": {"table": {"2026-10-27": {"minTime": "16:00", "maxTime": "22:00"}}}}`. Other days use MinTime and MaxTime
scroll	Mouse wheel changes month, year and time	none
label	Keeps `<label for>` working when AltFormat is used	none

Keep dateFormat as "Y-m-d" in monthSelect options, so the value still converts to an OutSystems date. In OutSystems expressions, write each " inside a text literal as "".

Localization and themes

Locale sets month names, weekdays and the first day of the week. The 65 built-in codes are:

default (English), ar, at, az, be, bg, bn, bs, ca, cat, ckb, cs, cy, da, de, en, eo, es, et, fa, fi, fo, fr, gr, he, hi, hr, hu, hy, id, is, it, ja, ka, km, ko, kz, lt, lv, mk, mn, ms, my, nl, nn, no, pa, pl, pt, ro, ru, si, sk, sl, sq, sr, sv, th, tr, uk, uz, uz_latn, vn, zh, zh_tw.

An unknown code falls back to English. FirstDayOfWeek overrides the locale's first day.

Theme loads one stylesheet for the whole page: default (light), dark, material_blue, material_green, material_red, material_orange, airbnb, confetti.

Use the same Theme on every picker of a page. The last picker created decides the theme.
default loads no extra stylesheet, so your own CSS on .flatpickr-calendar applies cleanly.

Recipes

Each row is a working setup from the FlatpickrDemo app. Values are written as OutSystems expressions.

Goal	Parameters
Readable date	AltFormat = "F j, Y"
Date and time, 12-hour	EnableTime = True, AltFormat = "F j, Y h:i K"
Time only, office hours	NoCalendar = True, Time24hr = True, MinTime = "09:00", MaxTime = "18:00", MinuteIncrement = 15
Start on today	DefaultDate = "today"
Range for the next 7 days	Mode = "range", DefaultDate = DateToText(CurrDate()) + "," + DateToText(AddDays(CurrDate(), 6))
Two months, inline	Mode = "range", ShowMonths = 2, Inline = True
Next 30 days only	MinDate = CurrDate(), MaxDate = AddDays(CurrDate(), 30)
No weekends	DisableWeekDays = "0,6"
Block a holiday range	DisableDates = "[{""from"": ""2026-12-24"", ""to"": ""2026-12-31""}]"
Several dates with a custom separator	Mode = "multiple", Conjunction = " \| "
French, Monday first	Locale = "fr", FirstDayOfWeek = 1
Typing allowed	AllowInput = True, Placeholder = "Type a date (Y-m-d)"
Inside a popup	Static = True
Open only from a button	ClickOpens = False, then call Flatpickr_Open
Stay open after picking	AdvancedOptions = "{""closeOnSelect"": false}"

Notes and troubleshooting

Upgrading from the previous version

The Theme default stays "dark", so existing screens keep their look. Set "default" for the light calendar.
EnableTime no longer turns on seconds. Set EnableSeconds as well if you need them.
SelectedDates is now optional, and returns NullDate instead of failing when the selection is cleared.

How it behaves

Changing any parameter rebuilds the picker and keeps the user's selection, unless DefaultDate changed.
The picker is destroyed when the block leaves the screen.
Calendars from this block keep 7 columns even with OutSystems UI's DatePicker styles on the page.
With AltFormat, the visible input copies the original input's classes, including ExtendedClass.

Problem	Fix
A JSON parameter has no effect	The browser console shows "[Flatpickr] Invalid JSON in ...". Check the doubled quotes in the expression
Locale stays English	The code isn't in the Localization list. Codes are lowercase
Client action does nothing	WidgetId is empty. Assign it in the Initialized handler before calling
Theme changes on other pickers	Expected: the theme is page-wide. Use one Theme per page
Range shows only one date	The user picked one date so far. Wait for DateList.Length = 2

1.0.2

--Will be update--

1.0.1

((Will update for documentation)

React Flatpickr