Date Picker Configuration and Date Formatting Guide in OutSystems

In the Toolbox (left panel), search for 'Date Picker'. It appears under the Interaction category in the OutSystems UI section. Drag it inside your Form widget on the canvas. Service Studio places a DatePicker block on screen and may prompt you to accept the OutSystems UI library dependency — click Yes. The Date Picker is an OutSystems UI Block (not a native widget), so it appears in the Widget Tree as a block element with a label placeholder above it. Create a Local Variable: right-click screen → Add Local Variable → Name = 'SelectedDate', Type = Date, Default Value = CurrDate().

Select the Date Picker block on the canvas. In the Properties Panel (right side), find the block's Input Parameters: - DateFormat: enter 'dd/MM/yyyy' for day/month/year display (this uses OutSystems format tokens, not Flatpickr tokens — OutSystems translates internally). Common formats: 'MM/dd/yyyy' (US), 'yyyy-MM-dd' (ISO), 'dd MMM yyyy' (e.g., '30 Mar 2026') - InitialDate: bind to SelectedDate (your Local Variable) - MinDate: add expression for earliest selectable date, e.g. CurrDate() to prevent past dates - MaxDate: e.g. AddYears(CurrDate(), 1) to limit to one year ahead - ShowTodayButton: True to display a 'Today' shortcut in the calendar - DisabledWeekDays: integer list for disabled days (0=Sunday, 6=Saturday) — e.g. [0, 6] to disable weekends

1/* Date Picker input parameter expressions */
2DateFormat:       "dd/MM/yyyy"
3InitialDate:      SelectedDate
4MinDate:          CurrDate()
5MaxDate:          AddYears(CurrDate(), 1)
6ShowTodayButton:  True
7DisabledWeekDays: [6, 0]

The Date Picker fires OnSelectedDateChanged when the user picks a date. This event provides the selected date value so you can store it. Select the Date Picker block → Properties Panel → Events section → OnSelectedDateChanged → 'New Client Action'. Service Studio creates 'DatePickerOnSelectedDateChanged' and opens it. In the Action Flow Editor, the event provides a local parameter 'SelectedDate' (Date type) automatically. Assign it to your screen variable: Start → Assign: SelectedDate = SelectedDate (map event parameter to screen variable) → End Note: the parameter name in the event handler is also 'SelectedDate' by default — rename your screen variable to 'ChosenDate' to avoid confusion, or rename the event parameter.

1/* OnSelectedDateChanged Client Action */
2/* Event input parameter: SelectedDate (Date) */
3Start
4  --> Assign: ChosenDate = SelectedDate
5  --> End

Use the FormatDate() built-in function whenever you need to display a date as a formatted string — in Expression widgets, labels, email bodies, or concatenated text. FormatDate syntax: FormatDate(Date/DateTime value, Text format_string) Format tokens: - yyyy or YYYY = 4-digit year (e.g. 2026) - yy = 2-digit year (e.g. 26) - MM = 2-digit month (01-12) - MMM = abbreviated month name (Jan, Feb, ...) - MMMM = full month name (January, February, ...) - dd = 2-digit day (01-31) - d = day without leading zero (1-31) - HH = 24-hour hours (00-23) - mm = minutes (00-59) - ss = seconds (00-59) Common examples: - FormatDate(CurrDate(), "dd/MM/yyyy") → '30/03/2026' - FormatDate(CurrDate(), "MMMM d, yyyy") → 'March 30, 2026' - FormatDate(CurrDateTime(), "yyyy-MM-dd HH:mm") → '2026-03-30 14:35'

1/* FormatDate expression examples */
2FormatDate(CurrDate(), "dd/MM/yyyy")           /* 30/03/2026 */
3FormatDate(CurrDate(), "MMMM d, yyyy")         /* March 30, 2026 */
4FormatDate(CurrDateTime(), "yyyy-MM-dd HH:mm") /* 2026-03-30 14:35 */
5FormatDate(OrderDate, "d MMM yyyy")            /* 30 Mar 2026 */
6
7/* Date arithmetic combined with FormatDate */
8FormatDate(AddDays(CurrDate(), 30), "dd/MM/yyyy")  /* 30 days from now */
9FormatDate(AddMonths(CurrDate(), 3), "MMM yyyy")   /* 3 months from now */

The Date Picker supports a RangeDate mode that lets users select a start and end date with a single widget. To activate this, use the Date Picker's RangeDate parameter instead of InitialDate. Create two Local Variables: 'StartDate' (Date) and 'EndDate' (Date). In the Date Picker Properties Panel: - Remove the InitialDate binding - Set RangeDate: click the expression editor → create a DatePickerRangeDate structure: StartDate: StartDate EndDate: EndDate In the OnSelectedDateChanged event, the SelectedDate parameter becomes a DatePickerRangeDate structure. Update both variables: Start → Assign: StartDate = SelectedDate.StartDate, EndDate = SelectedDate.EndDate → End Display the range: FormatDate(StartDate, "dd/MM/yyyy") + " to " + FormatDate(EndDate, "dd/MM/yyyy")

1/* RangeDate binding */
2RangeDate.StartDate = StartDate
3RangeDate.EndDate   = EndDate
4
5/* OnSelectedDateChanged for range mode */
6StartDate = SelectedDate.StartDate
7EndDate   = SelectedDate.EndDate
8
9/* Display expression */
10FormatDate(StartDate, "dd/MM/yyyy") + " to " + FormatDate(EndDate, "dd/MM/yyyy")