How to render Daterangepicker with single calendar

By default, the EJ2 DateRangePicker component will be rendered with two calendars in the desktop mode and with one calendar in the mobile mode based on the available spaces. The following section explains how to render the DateRangePicker component with one calendar in the 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;
}

The sample has been created using the previous code and attached below.

https://stackblitz.com/edit/rybata-vdtfom?file=index.ts

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