Issue with Calendar in Safari

[Daniel]

Hi all,

We have an issue with rendering a Sitefinity Widget that contains a KendoUI Calendar Control.

When we assign a array of Date objects to the calendar they don't appear within the Calendar. This only occurs within Safari on MacOS and on iPhones, but not in e.g. Chrome, FF, IE etc.

I'm not sure why this is. It seems to be related to parsing dates, but I don't know how we could fix this? This is the code that does the trick:

// disabledDates and formattedDates are of type Date[]
this.disabledDates = formattedDates.map((date: Date) => {
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
});

 

When I assign an array of dates manually, it seems to work:

this.disabledDates = [
   new Date(2020, 7, 2),
   new Date(2020, 7, 4),
   new Date(2020, 7, 5),
   new Date(2020, 7, 6),
   new Date(2020, 7, 7),
];

 

Hope someone has a clue?

Thanks, Daniel

[Dimiter Topalov]

Hello Daniel,

Different browsers have different mechanics for parsing dates, and based on the provided information, this seems to be causing the described behavior:

https://stackoverflow.com/questions/3085937/safari-js-cannot-parse-yyyy-mm-dd-date-format

As TypeScript allows formatted date string representations as their Date type too (but these strings are not actual JavaScript dates), it is possible that an actual valid JavaScript Date object is not created in the formattedDate.map(...) callback.

As assigning an array of disabled dates that are valid JavaScript Date objects, I can suggest providing some custom logic which ensures that the formattedDates array is mapped correctly to the desired Date objects array - for example log the return value, to check what it actually is before returning it:

console.log(new Date(date.getFullYear(), date.getMonth(), date.getDate()));

You can also check what calling each of the getFullYear, getMonth and getDate methods return.

If the issue persists, please send us an isolated runnable project or a StackBlitz demo (just the Calendar component, and the initial formattedDate array should be enough) where the problem can be observed, so we can investigate it further, and try to provide a solution that is best suitable to the specific use case. You can use the following online demo as a base:

https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/disabled-dates/#toc-using-a-date-array

https://stackblitz.com/edit/angular-dmsfx8?file=app/app.component.ts

Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Daniel]

Hi Dimiter,

Thanks for the follow up.
I figured it out. I guess the mix with moment.js and Date objects probably didn't work.

But I'm not sure. And logging to the console didn't show differences between the objects.

Anyway, it working now.

Thanks,
Daniel