Adaptive Mode

The Kendo UI for jQuery DateTimePicker provides adaptive mode—built-in mobile-friendly rendering of its popup that accommodates the component content based on the current screen size.

To set the adaptive mode, use the adaptiveMode option. In the example below, you can resize the browser to see how the component will adapt to different resolutions.

EditPreviewOpen In Dojo

    <div style="justify-content:center">
      <div style="width:600px; ">
        <input id="datetimepicker" style="width: 100%;"/>
      </div>
    </div>
    <script>
      $(document).ready(function() {
        $("#datetimepicker").kendoDateTimePicker({
          adaptiveMode: "auto"
        });
      });
    </script>

On-Screen Keyboard

To enhance the mobile user experience of your application, you can configure the type of the on-screen keyboard for the DateTimePicker component.

To configure an on-screen keyboard for the DateTimePicker, set the inputMode property to a supported 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 jQuery DateTimePicker.

EditPreviewOpen In Dojo

    <input id="datetimepicker" />        
    <script>
      $(document).ready(function() {
        $("#datetimepicker").kendoDateTimePicker({
          inputMode: "numeric"         
        });
      });
    </script>