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.
-
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.