Adaptive Mode

The Kendo UI for jQuery DateRangePicker 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; ">
        <div id="daterangepicker" style="width: 100%;"></div>
      </div>
    </div>
    <script>
      $(document).ready(function() {
        $("#products").kendoDateRangePicker({
          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 DateRangePicker component.

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

EditPreviewOpen In Dojo

    <div id="daterangepicker" "></div>          
    <script>
      $(document).ready(function() {
        $("#daterangepicker").kendoDateRangePicker({
          inputMode: "numeric"         
        });
      });
    </script>