Issue with Calendar in Safari

3 posts, 0 answers
  1. Daniel
    Daniel avatar
    2 posts
    Member since:
    Oct 2019

    Posted 30 Jun Link to this post

    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

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1282 posts

    Posted 02 Jul Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Daniel
    Daniel avatar
    2 posts
    Member since:
    Oct 2019

    Posted 02 Jul in reply to Dimiter Topalov Link to this post

    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

Back to Top