Skip to main content






Applies only to Traditional Web Apps



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.

    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?