Why does this jQuery function work partially on some browsers?

Question

I use this jQuery function in the functions.php file to calculate and display a date, which will be in a certain number of days, starting today, but excluding weekends and holidays.

jQuery(function($) {
  if ($('body.page-id-5749').length > 0) {
    var monthNames = ["gennaio", "febbraio", "marzo", "aprile", "maggio", "giugno", "luglio", "agosto", "settembre", "ottobre", "novembre", "dicembre"];
    var dayNames = ["domenica", "lunedì", "martedì", "mercoledì", "giovedì", "venerdì", "sabato"];
    var holidays = ["2019, 12, 8", // 8 DICEMBRE 2019
      "2019, 12, 25", // 25 DICEMBRE 2019
      "2019, 12, 26", // 26 DICEMBRE 2019
      "2020, 1, 1", // CAPODANNO 2020
      "2020, 1, 6", // EPIFANIA 2020
      "2020, 4, 13", // PASQUETTA 2020
      "2020, 4, 25", // 25 APRILE 2020
      "2020, 5, 1", // 1 MAGGIO 2020
      "2020, 6, 2", // 2 GIUGNO 2020
      "2020, 8, 15", // 15 AGOSTO 2020
      "2020, 11, 1", // 1 NOVEMBRE 2020
      "2020, 12, 8", // 8 DICEMBRE 2020
      "2020, 12, 25", // 25 DICEMBRE 2020
      "2020, 12, 26", // 26 DICEMBRE 2020
      "2021, 1, 1"
    ]; // 1 GENNAIO 2021
    var endDate = "",
      noOfDaysToAdd = $(".valMixBeatVoce").html(),
      count = 0;
    var someDate = new Date(new Date().toDateString());
    var numberOfDaysToAdd = noOfDaysToAdd;
    someDate.setDate(someDate.getDate());
    while (count < noOfDaysToAdd) {
      endDate = new Date(someDate.setDate(someDate.getDate() + 1));
      var isHoliday = holidays.find(holiday => endDate.getTime() == new Date(holiday).getTime());
      if (isHoliday) {
        console.log('holiday, skipping');
      } else if (endDate.getDay() != 0 && endDate.getDay() != 6) {
        count++;
      }
    }
    $('#DateMixBeatVoce').html(dayNames[endDate.getDay()] + ' ' + endDate.getDate() + ' ' + monthNames[endDate.getMonth()]);
    $('#DateMixBeatVoce2').html(dayNames[endDate.getDay()] + ' ' + endDate.getDate() + ' ' + monthNames[endDate.getMonth()]);
  }
});

But, while on Chrome (desktop) and Firefox (desktop) it works perfectly, on Safari (desktop) and on all mobile browsers (Chrome, Firefox, Safari), the date is calculated excluding weekends, but not excluding holidays. I do not understand why.

Here are the desktop consoles:

Chrome (working):

holiday, skipping (index):880
[Violation] Forced reflow while executing JavaScript took 40ms
(Warning) DevTools failed to parse SourceMap: https://stats.wp.com/s.js.map

Firefox (working):

(Warning) This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. example.com
holiday, skipping example.com:880:17
(Warning) This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning example.com

Safari (holidays are not skipped):

[Info] Successfuly preconnected to https://fonts.gstatic.com/
[Error] Failed to load resource: the server responded with a status of 404 () (s.js.map, line 0)

Here is the Reproducible Example: as you can see, it only works on Chrome (desktop) and Firefox (desktop), while holidays are not calculated on Safari (desktop) and on all mobile browsers (Chrome, Firefox, Safari), resulting in a different date shown:

https://jsfiddle.net/englishsound/pf3zg4xj/7/

Solution: https://jsfiddle.net/englishsound/pf3zg4xj/14/

Welcome to Stack Overflow. Please provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example Also it's not clear why you are performing this in the Client. You could calculate all this server-side in PHP and then you have 1 environment to contend with instead of many different browsers. — Twisty, Apr 03 '20 at 17:29
Does this answer your question? [JS: Safari new Date().getTime() gives different results from Chrome](https://stackoverflow.com/questions/47467851/js-safari-new-date-gettime-gives-different-results-from-chrome) — Anurag Srivastava, Apr 03 '20 at 17:45
Thanks very much @Twisty! I just updated the question with a reproducible example. Well, I'm doing that this way (in the functions.php file) because I'm a self-taught and I don't know how to do (and what you mean) to calculate all this server-side. I'm sorry. Thanks @AnuragSrivastava! No, unfortunately that post does not solve the problem. — EnglishSound, Apr 04 '20 at 06:26
Some potential help: https://jsfiddle.net/Twisty/j0mf2qna/30/ — Twisty, Apr 04 '20 at 19:55

Barmar · Accepted Answer · 2020-04-04T07:54:55.930

2019, 12, 25 is not a standard format for JavaScript dates. The formats that can be used portably are either ISO 8601 dates like 2019-12-25 or RFC 2822 dates like December 12, 2019.

You could change the holidays array to contain arrays rather than strings

var holidays = [
    [2019, 12, 8], // 8 DICEMBRE 2019
    [2019, 12, 25], // 25 DICEMBRE 2019
    [2019, 12, 26], // 26 DICEMBRE 2019
    [2020, 1, 1], // CAPODANNO 2020
    [2020, 1, 6], // EPIFANIA 2020
    [2020, 4, 13], // PASQUETTA 2020
    [2020, 4, 25], // 25 APRILE 2020
    [2020, 5, 1], // 1 MAGGIO 2020
    [2020, 6, 2], // 2 GIUGNO 2020
    [2020, 8, 15], // 15 AGOSTO 2020
    [2020, 11, 1], // 1 NOVEMBRE 2020
    [2020, 12, 8], // 8 DICEMBRE 2020
    [2020, 12, 25], // 25 DICEMBRE 2020
    [2020, 12, 26], // 26 DICEMBRE 2020
    [2021, 1, 1]
];

, and then pass them as separate arguments to new Date():

  var isHoliday = holidays.find(holiday => endDate.getTime() == new Date(holiday[0], holiday[1]-1, holiday[2]).getTime());

Notice that you have to subtract 1 from the month because JavaScript counts months starting from 0.

Thanks @Barmar! Unfortunately I was unable to make it work: changing the holidays array to contain arrays rather than strings, it also caused the problem to occur on Firefox desktop. While passing them as separate arguments to new Date (), it created an error that didn't show results anywhere (but almost certainly due to my inexperience). — EnglishSound, Apr 04 '20 at 06:27
Fantastic @Barmar! It works. I updated the post with the solution. I really appreciate your help, have a good day. — EnglishSound, Apr 04 '20 at 10:35

Why does this jQuery function work partially on some browsers?

1 Answers1