Skip to main content

Patterns

 

OutSystems

DatePicker

Select a single date or a range of dates.

Use the DatePicker to allow the end-user to select a single or a range of dates using a calendar.

How to use

Drag an input and the DatePicker to the screen and set up the parameters. Only the InputWidgetId parameter is mandatory and must reference an input widget that will show the date picked on the page.

For advanced options, read the official documentation: https://github.com/dbushell/Pikaday

  1. Drag an Input widget into the preview.

  2. Give a name to the input (for instance, datepicker).

  3. Set a variable of type date to the input.

  4. Drag the DatePicker into the preview.

  5. Set the InputWidgetId to the input name.

  6. In the Events, create the OnClose and OnSelect events.

  7. Use the date in the input parameter in your logic.

  8. Publish and test.

Input Parameters

Input Name Description Type Mandatory Default Value
InputWidgetId Input Element Name that will trigger the element to be visible. Text True none
ButtonWidgetId Element Name (example: button) that will trigger the element to be visible. Text False ""
DisabledDates List of dates for the disabled days. Date List False none
MinDate Date Picker enables dates from this date onwards and disables dates before this date. Date False none
MaxDate Date Picker enables dates that come before this date and disables dates after this date. Date False none
InitialDate If set, the calendar will initially display the set date, otherwise it will display the current Date. Date Time False CurrDate()
DateFormat Defaults to the date format defined in the server configuration. The default is the server date format. Text False ""
AdvancedFormat Allows for more options that the ones given in the input parameters. DatePickerAdvancedFormat False CurrDate()

DatePickerAdvancedFormat information

Input Name Description Type Mandatory Default Value
EventsList A list of events (type Date Time) Date Time List False none
AdvancedFormatJSON A string with options such as: { disableWeekends: true, BeginEmpty: true }. For more advanced options, read the official documentation: https://github.com/dbushell/Pikaday Date Time List False none

Layout and Classes

Month Picker

Year Picker

Events

Event Name Description Mandatory
onClose Event that will be triggered once you close the date picker which returns the last selected date. False
onOpen Event that will be triggered once you open the date picker. False
OnSelect Event will be triggered when a date is selected returning it. False

Advanced Use Case

Start with a blank input

  1. Drag the DatePicker to the preview.

  2. Expand the AdvancedFormat property.

  3. Add { BeginEmpty: true } in the AdvancedFormatJSON.

Have a flat datepicker

  1. Drag the DatePicker to the preview.

  2. Expand the AdvancedFormat property.

  3. Add { bound: false } in the AdvancedFormatJSON.

  4. To use events to pick the chosen date, use OnSelect instead of OnClose.

Add Events

  1. Drag the DatePicker to the preview.

  2. Expand the AdvancedFormat property.

  3. Add your date time list in the EventList.

Use Date Format

  1. Drag the DatePicker to the preview.

  2. Set the format of the date (for instance, "DD MMM of YYYY" will be displayed as 12 Dec of 2018).

  3. Create an onClose or OnSelect event and use the date for your logic.

Device Compatibility

When used on mobile devices, it should be used horizontally to avoid issues related to the positioning of the DatePicker.

  • Was this article helpful?