Responsive DateRange

[Ali Kholmatov]

Hi! Could I fix it? I think there must be mobile version

[Sureshkumar P]

Hi Ali, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement with screenshot. We have render the daterangepicker mobile popup based on size of the window width. If window width exceeds 550px then our popup opens as like desktop mode. That is the reason the popup was opened like desktop mode. 

 

Regards, 

Sureshkumar P 

[Ali Kholmatov]

Sorry , but how can I manage it? it's not right

[Ali Kholmatov]

Hi Ali, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement with screenshot. We have render the daterangepicker mobile popup based on size of the window width. If window width exceeds 550px then our popup opens as like desktop mode. That is the reason the popup was opened like desktop mode. 

 

Regards, 

Sureshkumar P 

Sorry , but how can I manage it? it's not right

[Berly Christopher]

Hi Ali, 

 

Thanks for you update. 

We have checked your query and would like to inform you that if the width of window exceeds 550px, then calendar of daterangepicker will be rendered for Desktop mode. If you want to change toggle it to mobile mode, you can change the variable isMobile  into true in Created event. We have made sample for your convenience. Please find the sample below.

 

Sample Link:  https://stackblitz.com/edit/angular-heyvqj-zvozew?file=index.html 

  

Please refer the below KB for further information.

KB Link: https://www.syncfusion.com/kb/10327/how-to-render-daterangepicker-with-single-calendar

 

  

Regards, 

Berly B.C 

[Jinu]

Hi,

DateRange picker is  not responsive .Its exceeding the screen limit even if 411 pixel width.

Please see the image

[Prince Oliver]

Hi Jinu, 

Thank you for contacting Syncfusion support. 

To make the DatePicker component response, kindly enable the mobile mode by setting the isMobile  into true in Created event. Kindly refer to the following example 

https://stackblitz.com/edit/angular-heyvqj-zvozew 

If you have rendered the control in the desktop mode, to enable mobile mode in the smaller width, you need to refresh the component. If this does not meet your requirement. Kindly share us additional information on your requirement. This will help us provide a prompt solution. 

Regards, 

Prince