JS error with maxDays on mobile

[Simon]

Hi, we have a JS error with <ejs-daterangepicker>, on mobile, when we specify the [maxDays] attribute and click to open the range picker.

To reproduce:

- add <ejs-daterangepicker to your markup and specify [maxDays]="maxRangeDays"

- load your page in mobile mode

- click to open the date range picker

- this error will be logged in the console:

TypeError: Cannot read properties of undefined (reading 'element')
    at DateRangePicker.updateMinMaxDays (ej2-calendars.es5.js:7284:46)
    at DateRangePicker.checkMinMaxDays (ej2-calendars.es5.js:7022:22)
    at DateRangePickerComponent.<anonymous> (ej2-calendars.es5.js:9412:31)
    at ComponentBase.trigger (component-base.js:381:21)
    at DateRangePicker.show (ej2-calendars.es5.js:9403:22)
    at DateRangePicker.inputFocusHandler (ej2-calendars.es5.js:6316:18)
    at _ZoneDelegate.invokeTask (zone.js:443:35)
    at Object.onInvokeTask (core.mjs:26261:33)
    at _ZoneDelegate.invokeTask (zone.js:442:64)
    at Zone.runTask (zone.js:214:51)
 Copy

If you close the picker by choosing a preset, and reopen the picker, the error still appears.

If you choose Custom (instead of one of the presets), then the next time you open it, the error will be gone.

The error comes from here, where this.endButton is not yet initialized on mobile until we click Custom.

We are using @syncfusion/ej2-angular-calendars@25.2.7, so the latest for v25 as of today.

Thank you!

[Priyanka Karthikeyan]

Hi Simon,

 

Thank you for reaching out to us. We understand the importance of the issue you are facing and have prepared a sample based on the details you provided. However, we were unable to reproduce the issue in mobile mode

 

For your reference, please find the sample attached.

 

Sample: https://stackblitz.com/edit/angular-ummfvy-bmwbz7?file=src%2Fapp.component.html,src%2Fapp.component.ts

 

To better understand the issue, could you please modify the provided sample with the steps to replicate the issue and include a video illustration? Alternatively, you can share a sample that reproduces the issue, which will help us understand the problem more clearly and provide you with a prompt response.

 

We appreciate your understanding and cooperation.

 

Regards,

Priyanka K

[Simon]

Hi Priyanka,

It does not cause an issue with the component itself (the behaviour is ok), it only generates a Javascript error in the console.  I did not modify the code of the sample you provided, but if you open the Chome DevTools, you will see the Javascript error when you click to open the picker, until you click on Custom Range.

Bests,

Simon

[Priyanka Karthikeyan]

Hi Simon,

 

We have considered the reported issue "Console error occurs in mobile device when we use maxDays property in DateRangePicker" as a bug from our end and the fix for the issue will be included on upcoming patch release which is scheduled at the mid of August 2024.

 

Now you can track the status of the reported issue through the feedback below,

 

Feedback:https://www.syncfusion.com/feedback/59957/console-error-occurs-in-mobile-device-when-we-use-maxdays-property-in

 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

 

Regards,

Priyanka K

 

[Simon]

Thank you Priyanka!

[Priyanka Karthikeyan]

Hi Simon,

 

We would like to inform you that we have resolved the reported issue "Console error occurs in mobile device when we use maxDays property in DateRangePicker" in our latest version 26.2.10. Therefore, we recommend that you update your package to the latest version to resolve the current problem. 

 

Sample:https://stackblitz.com/edit/angular-ummfvy-rvxgvp?file=src%2Fapp.component.html,package.json

 

Root cause: In DateRangePicker, when the popup is opened in mobile mode, it checks whether the button element's class list contains 'Active'. However, if the button class is undefined, it results in a "cannot read property" error. 

 

Regards,

Priyanka K

[Simon]

Hi Priyanka,

I can confirm it's been resolved.

Thank you!

Simon

[Kalpana Ganesan]

Hi Simon,

You're welcome! Glad that the provided solution was helpful. If you have any other questions, please reach out to us, we will be happy to help you.

Regards,

Kalpana.