How to render Daterangepicker with single calendar

This article explains how to render DateRangePicker with a single calendar.

By default, the EJ2 DateRangePicker component will be rendered with two calendars in desktop mode and one calendar in mobile mode based on the available space. The following section explains how to render the DateRangePicker component with one calendar in desktop mode.

DateRangePicker in desktop mode (with two calendars)

DateRangePicker in mobile mode (with one calendar)

You can render the DateRangePicker with one calendar by overriding the default rendering to mobile mode by enabling the “isMobile” option as true in the created event of the DateRangePicker component, as mentioned in the following code example.

[index.html]

<div id="wrapper">
        <input id="daterangepicker" type="text">
</div>

[index.ts]

import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { DateRangePicker } from '@syncfusion/ej2-calendars';
 
let daterangepicker: DateRangePicker = new DateRangePicker({
    created: onCreate
});
daterangepicker.appendTo('#daterangepicker');
 
function onCreate(args) {
     (daterangepicker as any).isMobile = true;
}

Refer to the working sample for additional details and implementation: Sample

For more information about DateRangePicker functionalities, refer to the UG Documentation, API Reference, and Samples section.