1. Home
  2. Forum
  3. Blazor
  4. DateRangePicker with single calendar on mobile

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

thanks






4 Replies
UD UdhayaKumar Duraisamy Syncfusion Team October 10, 2022 04:39 PM UTC

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.


Regards,

Udhaya Kumar D



Attachment: Demo_88_61ff881b.zip

MS Michael Salzlechner October 11, 2022 07:07 PM UTC

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">
</sfdaterangepicker>


daterangepick.jpg


MS Michael Salzlechner October 11, 2022 07:42 PM UTC

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 04:25 PM UTC

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.


Regards,

Udhaya Kumar D



Loader.
Up arrow icon