Javascript compatibility with desktop Safari

Question

I wrote the following code for displaying a different image depending on the date (right now this example just console logs a message). The code works fine in Chrome and Firefox on Mac, but does not work correctly or give any errors on Safari (in Safari the message does not change depending on the date, it just says the same). How is Safari processing this differently? How can I get this to work on Safari with minimal changes?

Here's a working repl.

Here's the code:

/* change these dates */
var ddt = new Date("2019, 8, 22");
var pre = new Date("2019, 8, 23");
var ton = new Date("2019, 8, 26");
var post = new Date("2019, 8, 27");

// todays date 
var currDate = new Date();
var mm = currDate.getMonth() + 1;
var dd = currDate.getDate();
var yyyy = currDate.getFullYear();

// Get the date parts
var ddtDay = ddt.getDate();
var ddtMonth = ddt.getMonth() + 1;
var ddtYear = ddt.getFullYear();
//console.log(ddtYear, ddtMonth, ddtDay);
var preDay = pre.getDate();
var preMonth = pre.getMonth() + 1;
var preYear = pre.getFullYear();
//console.log(preYear, preMonth, preDay);
var tonDay = ton.getDate();
var tonMonth = ton.getMonth() + 1;
var tonYear = ton.getFullYear();
//console.log(tonYear, tonMonth, tonDay);
var postDay = post.getDate();
var postMonth = post.getMonth() + 1;
var postYear = post.getFullYear();
//console.log(postYear, postMonth, postDay);

// format the date parts
if (ddtDay < 10) {
  ddtDay = '0' + ddtDay;
}
if (ddtMonth < 10) {
  ddtMonth = '0' + ddtMonth;
}
if (preDay < 10) {
  preDay = '0' + preDay;
}
if (preMonth < 10) {
  preMonth = '0' + preMonth;
}
if (tonDay < 10) {
  tonDay = '0' + tonDay;
}
if (tonMonth < 10) {
  tonMonth = '0' + tonMonth;
}
if (postDay < 10) {
  postDay = '0' + postDay;
}
if (tonMonth < 10) {
  postMonth = '0' + postMonth;
}
if (dd < 10) {
  dd = '0' + dd;
}
if (mm < 10) {
  mm = '0' + mm;
}

var ddtF = (ddtYear + '-' + ddtMonth + '-' + ddtDay);
var preF = (preYear + '-' + preMonth + '-' + preDay);
var tonF = (tonYear + '-' + tonMonth + '-' + tonDay);
var postF = (postYear + '-' + postMonth + '-' + postDay);
var today = (yyyy + '-' + mm + '-' + dd);
console.log(ddtF);
console.log(preF);
console.log(tonF);
console.log(postF);
console.log(today);

// logic
if (today >= postF) {
  console.log('post');
} else if (today === tonF) {
  console.log('ton');
} else if (today < tonF && today >= preF) {
  console.log('pre');
} else if (today <= ddtF) {
  console.log('ddt');
}

Can you explain what this is supposed to do? Which part of it isn't working in Safari? It looks like there's lots of code that's not really relevant to the problem, can you narrow it down to a [mcve]? — Barmar, Aug 08 '19 at 22:11
A timestamp like "2019, 8, 22" is not a format supported by ECMA-262, so parsing is implementation dependent (i.e. a compliant result might be a correct parse, incorrect parse or invalid date). — RobG, Aug 09 '19 at 04:26

Barmar · Accepted Answer · 2019-08-08T22:13:56.393

"2019, 8, 22" is not a portable date format. The Date constructor has a portable calling sequence where you give each component of the date as a separate argument, so use

var ddt = new Date(2019, 7, 22);

and similarly for all the other variables.

And remember that months are counted from 0 in JavaScript, so you need to subtract 1 from the month argument (August is 7).

/* change these dates */
var ddt = new Date(2019, 7, 22);
var pre = new Date(2019, 7, 23);
var ton = new Date(2019, 7, 26);
var post = new Date(2019, 7, 27);

// todays date 
var currDate = new Date();
var mm = currDate.getMonth() + 1;
var dd = currDate.getDate();
var yyyy = currDate.getFullYear();

// Get the date parts
var ddtDay = ddt.getDate();
var ddtMonth = ddt.getMonth() + 1;
var ddtYear = ddt.getFullYear();
//console.log(ddtYear, ddtMonth, ddtDay);
var preDay = pre.getDate();
var preMonth = pre.getMonth() + 1;
var preYear = pre.getFullYear();
//console.log(preYear, preMonth, preDay);
var tonDay = ton.getDate();
var tonMonth = ton.getMonth() + 1;
var tonYear = ton.getFullYear();
//console.log(tonYear, tonMonth, tonDay);
var postDay = post.getDate();
var postMonth = post.getMonth() + 1;
var postYear = post.getFullYear();
//console.log(postYear, postMonth, postDay);

// format the date parts
if (ddtDay < 10) {
  ddtDay = '0' + ddtDay;
}
if (ddtMonth < 10) {
  ddtMonth = '0' + ddtMonth;
}
if (preDay < 10) {
  preDay = '0' + preDay;
}
if (preMonth < 10) {
  preMonth = '0' + preMonth;
}
if (tonDay < 10) {
  tonDay = '0' + tonDay;
}
if (tonMonth < 10) {
  tonMonth = '0' + tonMonth;
}
if (postDay < 10) {
  postDay = '0' + postDay;
}
if (tonMonth < 10) {
  postMonth = '0' + postMonth;
}
if (dd < 10) {
  dd = '0' + dd;
}
if (mm < 10) {
  mm = '0' + mm;
}

var ddtF = (ddtYear + '-' + ddtMonth + '-' + ddtDay);
var preF = (preYear + '-' + preMonth + '-' + preDay);
var tonF = (tonYear + '-' + tonMonth + '-' + tonDay);
var postF = (postYear + '-' + postMonth + '-' + postDay);
var today = (yyyy + '-' + mm + '-' + dd);
console.log(ddtF);
console.log(preF);
console.log(tonF);
console.log(postF);
console.log(today);

// logic
if (today >= postF) {
  console.log('post');
} else if (today === tonF) {
  console.log('ton');
} else if (today < tonF && today >= preF) {
  console.log('pre');
} else if (today <= ddtF) {
  console.log('ddt');
}

Hi Thanks Barmar. Unfortunately that didn't work. Making this change actually stopped the code from working in Chrome and Firefox and didn't fix it in Safari. Whereas the original code worked in Chrome and Firefox. — Agent Zebra, Aug 08 '19 at 22:02
I just tried my snippet in Chrome and Safari, it gets the same result. — Barmar, Aug 08 '19 at 22:15
Hi Barmar, I just retested it in Safari and it works great. Thanks so much — Agent Zebra, Aug 09 '19 at 01:33

Javascript compatibility with desktop Safari

1 Answers1