Skip to main content




Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:

How to use the Date Picker UI Pattern

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • This example binds the Date Picker widget to an input. When the user selects a date from the calendar it is displayed in the input widget.

    1. In Service Studio, in the Toolbox, search for Date Picker.

      The Date Picker widget is displayed.

      If the UI widget does not display, 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 again.

    2. From the Toolbox, drag the Date Picker widget into the Main Content area of your application's screen.

    3. Drag an Input widget to the screen and on the Properties tab, enter a name (in this example Input_Text), and leave the Input Type property as Text.

      Note: Ensure you place the Input widget before the DatePicker block to avoid rendering errors.

    4. Create a variable by selecting New Local Variable from the Variable dropdown.

      This variable stores any value entered into/received by the input widget.

    5. Enter a name for the variable (in this example TextInput) and select Text as the Data Type.

    6. Select the DatePicker block, and set the InputWidgetId property to the Input Id (the Input widget name).

      When using the InputWidgetId property, you must always set the Input Type property to Text (not Date) for the following reasons:

      • To avoid conflicts with the html native Date Picker available for inputs of type "date" and "local-datetime"

      • To simplify the advanced date format options available in the Date Picker, you must always use input and variables of type text. Although this forces you to use Data Conversion, it brings you more flexibility when controlling the date format as well as an overall improved user experience during runtime.

    7. To create an OnSelect event for the Date Picker, on the Properties tab, from the Handler dropdown, select New Client Action.

      The DateFormat property only formats the date that appears on the bound input. The date that is thrown on the OnSelect event defaults to the server format and can be customized using the Data Conversion functions.

    8. To access the date selected by the user, create an Assign and set the StartDate and EndDate Data Type property to Date.

    9. Right-click your main screen and add another local variable.

      This variable stores the date selected by the user.

    10. Enter a name for the variable (in this example PickedDate) and select Date as the Data Type.

    11. Select the Assign (created in step 8) and assign the PickedDate variable (created in step 9) to the StartDate.

    12. On the Properties tab, you can customize the Date Picker's look and feel by setting any of the (optional) properties.

    After following these steps and publishing the module, you can test the pattern in your app.



    Properties Description
    InputWidgetId (Text): Optional 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 displayed. (False is the default.)
    FirstWeekDay (Integer): Optional Defines which weekday is displayed first.
    • 0: Sunday
    • 1: Monday (default)
    • 2: Tuesday
    • 3: Wednesday
    • 4: Thursday
    • 5: Friday
    • 6: Saturday
    ShowTime (Boolean): Optional If True, a time picker is displayed below the Date Picker. If False, there is no time picker displayed. (False is the default.)
    Show24HourFormat (Boolean): Optional If True, the time picker is displayed in a 24-hour format. If False, the time picker is displayed in a 12-hour format. (True is the default.)
    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.
    • 0: Sunday
    • 1: Monday
    • 2: Tuesday
    • 3: Wednesday
    • 4: Thursday
    • 5: Friday
    • 6: Saturday

    • Blank - All weekdays are active.
    • "0,5" - Sunday and Friday are disabled.
    SelectInterval (Boolean): Optional Allows the selection between two dates. If True, the block event OnSelect has the values for both parameters.
    StartEmpty (Boolean): Optional Defines whether the input for the Date Picker starts as empty.
    DateFormat (Text): Optional The Date Picker uses the Moment.js library to handle the date format. It defaults to YYYY-MM-DD format which is accepted by OutSystems form validations.For better compatibility we advise using an input and variable of type "text". If that's the case, here's some of the examples that you can use:
    • DD/MM/YYYY - 15/05/2020
    • MM/DD/YYYY - 05/15/2020
    • DD MMM YYYY - 15 May 2020
    If using an input/variable of type Date or DateTime, due to form validations,the only options available are the following:
    • Server Format
    • YYYY-MM-DDTHH:mm:ss.ssss
    • YYYY-MM-DD HH:mm:ss
    • YYYY/MM/DD HH:mm:ss
    • YYYY.MM.DD HH:mm:ss
    • YYYY.MM.DD
    • YYYY/MM/DD
    • YYYY-MM-DD
    ShowTodayButton (Boolean): Optional If True, the Today button is displayed. If False, the Today Button is not displayed. (False is the default.)
    AdvancedFormat (Text): Optional Allows for more options beyond what is provided through the inputs. For more information, see Pikaday Configuration

    For more information on how to implement more advanced use cases, see Date Picker advanced use cases.

    • Was this article helpful?