We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render Daterangepicker with single calendar

Platform: JavaScript - EJ 2 |
Control: DateRangePicker

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.


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




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


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


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

You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile