Skip to main content




Applies only to Mobile Apps and Reactive 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 users select a single date or a range of dates using a calendar. The Date Picker Pattern is based on the Pikaday.js library (version 1.8.2). For more advanced options, you can refer to this library.

    Only use the Date Picker Pattern if you really need the more advanced use cases it provides. As a general good practice in web development, especially when targeting Mobile, using the HTML input type="date" should be prioritized, because by default, it provides the best user experience and accessibility across all browsers with very low impact to performance.

    The following are the main ways you can display the Date Picker widget on a screen:

    • Bound to an input using the InputWidgetId parameter (shown in the How to Use the Date Picker UI Pattern

    • Bound to a trigger element, for example, a button, using the ButtonTriggerId parameter

    • Rendered flat on the screen by leaving both the InputWidgetId and ButtonTriggerId properties empty

    Direction and Internationalization

    The Date Picker Pattern sets both directions and translations automatically. If you choose a locale that triggers the Right-To-Left options on the screen, the Date Picker automatically sets the isRTL setting to True.

    Translation options are automatically set using the settings in the Multilingual component. This component automatically changes the language based on the current HTML language attribute.

    Articles in this Section

    • Was this article helpful?