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

DateRangePicker with single calendar on mobile

the DRPicker shows 2 calendars side by side which of course doesnt fit on a mobile screen

in the doc it actually shows it in single calendar mode but i cant seem to find a way to put it into that mode


4 Replies

UD UdhayaKumar Duraisamy Syncfusion Team October 10, 2022 11:39 AM

Hi Michael,

By default, When we render the DateRangePicker component on mobile devices, the popup opens as a single calendar. We have attached a video illustration below for your reference. Also would like to inform you that if the width of the window exceeds 550px, then the calendar of DateRangePicker will be rendered for Desktop mode.

If we misunderstood the requirement, we request you to provide additional details about the requirement as mentioned below. This will help us validate the requirement further and provide you with a better solution.

  1. Exact Requirement details.
  2. Requirement use case scenario.


Udhaya Kumar D

Attachment: Demo_88_61ff881b.zip

MS Michael Salzlechner October 11, 2022 02:07 PM

when we use a daterangepicker as follows we always get two calendars side by side

<sfdaterangepicker floatlabeltype="FloatLabelType.Always" tvalue="DateTime?" placeholder="Date Range" @bind-startdate="@serviceFromDate" @bind-enddate="@serviceToDate">


MS Michael Salzlechner October 11, 2022 02:42 PM

just realized whats happening. You cannot switch to a smaller screen at runtime. the mode is determined at startup

UD UdhayaKumar Duraisamy Syncfusion Team October 12, 2022 11:25 AM

Hi Michael,

Yes, When we switch from a larger window to a smaller window or minimize the screen we need to refresh or re-render the component to get the proper UI otherwise the DateRangePicker popup will not open properly.


Udhaya Kumar D

Live Chat Icon For mobile
Up arrow icon