Adaptive RenderingPremium
The DateRangePicker provides an option for enabling adaptive rendering for the popup element. This functionality allows the component to adapt to the screen size by providing different rendering of the popup element based on the screen dimensions.
To enable the adaptive rendering, set the adaptive property of the DateRangePicker to true.
To set the title of the dialog window rendered when the DateRangePicker is opened on a smaller screen, set the adaptiveTitle property of the component.
The Adaptive Mode changes the rendering of the popup element of the DateRangePicker as per the screen resolution of the device (the horizontal value in px) with the following default breakpoints:
Small screens - up to 500px—Displays a full-screen action sheet.Medium screens - between 500px and 768px—Displays a popup as an action sheet pinned to the bottom of the screen.Large screens - larger than 768px—Displays a popup as an animation container attached to the main element of the component.
You can further customize the adaptive breakpoints via AdaptiveMode React Context.
Resize the browser to see how the DateRangePicker adapts to different resolutions.
On-Screen Keyboard
To enhance the mobile user experience of your React apps, you can configure the type of the on-screen keyboard for the KendoReact DateRangePicker. Use the inputAttributes property to set the inputMode. Based on the inputMode setting, the browser will display the most appropriate virtual keyboard.
The inputAttributes property lets you set custom HTML attributes to the inner focusable input.
Check out the different type of virtual keyboard on a mobile device.