New to Kendo UI for Angular? Start a free 30-day trial

Adaptiveness

Adaptiveness is an advanced capability that allows you to enhance the Kendo UI for Angular DateRange 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.

The DateRange supports an adaptive mode that provides a mobile-friendly rendering of its calendar popup. To enable it, set the adaptiveMode input property to 'auto'.

Change Theme

Theme

Loading ...

Adaptive Breakpoints

In adaptive mode, the DateRange component automatically adapts to the current screen size and changes its rendering accordingly:

On medium-sized screens, the list with suggestions displays as a docked to the bottom action sheet.
On smaller screens, the list with suggestions appears in a full-screen action sheet.
In all other scenarios, including when the parameter is not set or is set to its default value of 'none', standard popup rendering is used.

The adaptive mode changes the rendering of the popup element of the DateRange 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 500px and 768px.
Large screens—larger than 768px.

If you need to customize the default values of the adaptive breakpoints, refer to the Adaptive Settings article.

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 DateRange component. The virtual keyboard functionality can be used as an alternative to the adaptive mode of the DateRange or as a suitable addition in scenarios with large screen devices.

To display an on-screen keyboard for the DateRange, 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 DateRange.