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.