Skip to main content




Applies only to Traditional Web Apps
Service Studio version:

Date Picker

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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

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

    2. On the Properties tab, enter the Input Name. In this example we call it datepicker.

    3. From the Variable drop-down, select New Local Variable.

    4. On the properties tab, set the Variable Data Type to Date.

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

    6. Set the InputWidgetId to the input Id.

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

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

    9. Publish and test.

    For advanced options, you can check the official documentation of the Pikaday library.


    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:

    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?