Date Picker
You can use the Date Picker UI Pattern to allow the user to select a single or a range of dates using a calendar.
How to use the Date Picker UI Pattern
-
In Service Studio, from the Toolbox, drag an Input widget into the Main Content area of your application's screen.
If the UI widget is not displayed in the Toolbox, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:
a. Go to Module > Manage dependencies.
b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.
c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.
d. Search for and select the element you want to add, and click Apply.
e. In Service Studio, in the Toolbox, search for the widget.
-
On the Properties tab, enter the Input Name. In this example we call it datepicker.
-
From the Variable drop-down, select New Local Variable.
-
On the properties tab, set the Variable Data Type to Date.
-
From the Toolbox, drag the Date Picker widget into the Main Content area of your application's screen.
-
Set the InputWidgetId to the input Id.
-
In the Events, create the OnClose and OnSelect events.
-
Use the date in the input parameter in your logic.
-
Publish and test.
For advanced options, you can check the official documentation of the Pikaday library.
Properties
| Property | Description |
|---|---|
| InputWidgetId (Text): Mandatory | Input element Id that triggers the element so it is visible. |
| ButtonWidgetId (Text): Optional | Element name (example: button) that triggers the element so it is visible. |
| DisabledDates (Date List):Optional | List of dates for the disabled days. |
| MinDate (Date): Optional | Dates from this date onwards are enabled and dates before this date are disabled. |
| MaxDate (Date): Optional | Dates before this date are enabled and dates after this date are disabled. |
| InitialDate (Date Time): Optional | If set, the calendar will initially display the set date, otherwise it will display the current Date (default). |
| DateFormat (Text): Optional | Defaults to the date format defined in the server configuration. The default is the server date format. |
| SelectInterval (Boolean): Optional | Allows the selection between two dates. If set to True, the Block Event "On Select" has the values for both parameters. |
| AdvancedFormat (DatePickerAdvancedFormat): Optional | Allows for more options than the ones given in the input parameters. |
Date Picker advanced format information
| Property | Description |
|---|---|
| EventsList (DateTime List): Optional | A list of events (type Date Time) |
| AdvancedFormatJSON (DateTime List): Optional | A string with options such as: { disableWeekends: true, BeginEmpty: true }. For more advanced options, read the official documentation: https://github.com/dbushell/Pikaday |
Device Compatibility
When used on mobile devices, it should be used horizontally to avoid issues related to the positioning of the DatePicker.