Adaptiveness
Adaptiveness is an advanced capability that allows you to enhance the Kendo UI for Angular DatePicker to appear in a completely new layout depending on the screen size. It also enables you to adjust the displayed on-screen keyboard for a more user-friendly interaction on touchscreen devices.
Adaptive Mode
The DatePicker supports an adaptive mode, which when enabled, provides a mobile-friendly rendering of its calendar popup. To enable it, set the adaptiveMode input property to 'auto'.
The DatePicker component will automatically adapt to the current screen size and will change its rendering accordingly. On medium-sized screens, the suggestion list will display as a docked to the bottom modal, while in smaller screens - a full-screen modal dialog will be used. In all other scenarios, including when the parameter has not been set or it has been to its default value of 'none', a standard popup rendering will be used.
The adaptive mode changes the rendering of the popup element of the DatePicker as per the screen resolution of the device (the horizontal value in px) with the following breakpoints:
- Small screens—up to
500px. - Medium screens—between
500pxand768px. - Large screens—larger than
768px.
If you need to customize the default values of the adaptive breakpoints, refer to the Adaptive Settings article.
The following example demonstrates the adaptive mode of the Kendo UI for Angular DatePicker.
On-Screen Keyboard
To enhance the mobile user experience of your Angular application, you can configure the type of the on-screen keyboard for the DatePicker component. The virtual keyboard functionality can be used as an alternative to the adaptive mode of the DatePicker or as a suitable addition in scenarios with large screen devices.
To display an on-screen keyboard for the DatePicker, use the inputAttributes property and set the inputmode HTML attribute to the desired value. Based on the defined setting, the browser will display the most appropriate virtual keyboard on the screen.
The following example demonstrates how to configure an on-screen keyboard for the Kendo UI for Angular DatePicker.