Adaptiveness
Adaptiveness is an advanced capability that enhances the Telerik UI for ASP.NET Core DateTimePicker by enabling a completely new layout based on the screen size. It also allows you to adjust the displayed on-screen keyboard for a more user-friendly interaction on touchscreen devices.
Adaptive Mode
The DateTimePicker supports an adaptive mode that provides a mobile-friendly rendering of its calendar popup. To enable the adaptive rendering mode, set the AdaptiveMode()
property to AdaptiveMode.Auto
.
The DateTimePicker component automatically adapts to the current screen size and changes its rendering accordingly. On medium-sized screens, the calendar is displayed as docked to the bottom of the screen, while on smaller screens, it is rendered as a full-screen modal dialog. In all other scenarios, including when the AdaptiveMode()
option is not specified or is set to its default value of AdaptiveMode.None
, the standard calendar popup is rendered docked to the input of the component.
The adaptive mode changes the rendering of the DateTimePicker popup element based on the screen resolution of the device (the horizontal value in px
) with the following breakpoints:
- Small screens—up to 500 px.
- Medium screens—between 501 px and 768 px.
- Large screens—over 768 px.
The following example demonstrates how to enable the adaptive mode of the DateTimePicker by using the AdaptiveMode()
option.
@(Html.Kendo().DateTimePicker()
.Name("dateTimePicker")
.AdaptiveMode(AdaptiveMode.Auto)
)
@addTagHelper *, Kendo.Mvc
<kendo-datetimepicker name="dateTimePicker" adaptive-mode="AdaptiveMode.Auto">
</kendo-datetimepicker>
On-Screen Keyboard
To enhance the user experience of your application on mobile devices, you can configure the type of the on-screen keyboard for the DateTimePicker component.
To display an on-screen keyboard when the user focuses the DateTimePicker input, set the InputMode()
property to any of the supported inputmode
HTML attribute values. Based on the defined value, the browser displays the respective virtual keyboard on the screen.
The following example demonstrates how to configure the most appropriate on-screen keyboard for the DateTimePicker.
@(Html.Kendo().DateTimePicker()
.Name("dateTimePicker")
.InputMode("numeric")
)
@addTagHelper *, Kendo.Mvc
<kendo-datetimepicker name="dateTimePicker" input-mode="numeric">
</kendo-datetimepicker>