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, in the Toolbox, search for
Date Picker.The Date Picker Image widget is displayed.
-
From the Toolbox, drag the Date Picker widget into the Main Content area of your application's screen.
On the Properties tab, you are prompted to create an event.
-
To have access to the picked date, you need to create an assign to the startDate (if SelectInterval is False ).
-
Set the default value of the variable PickedDate as CurrDateTime().
Result
Listing Events of a Selected Day
-
Set the area where you want to put the list of events.
-
Create an entity with a DateTime attribute.
-
Set the entity in your EventList parameter on eventList, using the right attribute to map.
-
Add the list to the page.
-
Create a Local Variable.
-
Get another Aggregate for the Events and set a filter on the aggregate:
DateTimeToDate(Events.DateTime) = Date
Result
Properties
| Properties | 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. |
| EventList (Date Time List): Optional | Receives a List of DateTime records that are used to highlight days as event days. |
| MinDate (Date Time): Optional | Days before this date will be disabled. |
| MaxDate (Date Time): Optional | Days after this date will be disabled. |
| InitialDate (Date Time): Optional | The initially selected day for the Date Picker. If not set, it will be the current day by default. |
| ShowWeekNumbers (Boolean): Optional | If True, the week number is displayed on the left side of the Date Picker. If False, the week number is not dispalyed. This is the default. |
| FirstWeekDay (Integer): Optional | Defines which weekday is displayed first.
|
| ShowTime (Boolean): Optional | If True, a time picker is displayed below the Date Picker. If False, there is no time picker displayed. This is the default. |
| Show24HourFormat (boolean) | If True, the time picker is displayed in a 24-hour format. This is the default. If False, the time picker is displayed in a 12-hour format. |
| DisabledDaysList (Date Time List): Optional | Receives a List of DateTime records that will be disabled on the DatePicker. If this parameter is not set, all days between the MinDate and MaxDate are enabled. No default value. |
| DisabledWeekDays (Text): Optional | String containing disabled weekdays.
|
| SelectInterval (Boolean): Optional | Allows the selection between two dates. If True, the Block Event "On Select" has the values for both parameters. |
| StartEmpty (Boolean): Optional | Defines whether the input for the Date Picker starts as empty. |
| DateFormat (Text): Optional | Defaults to the date format defined in the server configuration. The default is the server date format. Examples
|
| ShowTodayButton (Boolean): Optional | If True, the Today button is displayed. If False, the Today Button is not displayed. This is the default. |
| AdvancedFormat (Text): Optional | Allows fors more options beyond what is provided through the inputs. |