JavaScript date method not working in FireFox

Question

I've built a countdown timer for a website and it works fine on other browsers but for some reason, the way I've built it doesn't seem to work on firefox and I'm not sure why. The numbers on the page say NaN while on other browsers, the numbers actually countdown. My code for this is below, any help will be much appreciated. Thank you.

<template>
  <div class="countdown">
    <!-- <img class="cover-image" src="@/assets/img/[email protected]" /> -->
    <div class="countdown-container">
      <h2>{{ `${$t('countdown.labels.countdownToEvent')}:` }}</h2>
      <div class="counter">
        <div>
          <div id="day">0</div>
          {{ $t('countdown.labels.days') }}
        </div>
        <div>
          <div id="hour">0</div>
          {{ $t('countdown.labels.hours') }}
        </div>
        <div>
          <div id="minute">0</div>
          {{ $t('countdown.labels.minutes') }}
        </div>
        <div>
          <div id="second">0</div>
          {{ $t('countdown.labels.seconds') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Countdown',
  data() {
    return {
      countDate: new Date('Oct 20, 2020 00:00:00:00').getTime(),
      counter: null,
    };
  },
  mounted() {
    this.counter = setInterval(() => {
      const now = new Date().getTime();
      const gap = this.countDate - now;

      const second = 1000;
      const minute = second * 60;
      const hour = minute * 60;
      const day = hour * 24;

      let d = Math.floor(gap / day);
      let h = Math.floor((gap % day) / hour);
      let m = Math.floor((gap % hour) / minute);
      let s = Math.floor((gap % minute) / second);

      if (d <= 0 && h <= 0 && m <= 0 && s <= 0) {
        clearInterval(this.counter);
        d = 0;
        h = 0;
        m = 0;
        s = 0;
      }
      document.querySelector('#day').innerText = d;
      document.querySelector('#hour').innerText = h;
      document.querySelector('#minute').innerText = m;
      document.querySelector('#second').innerText = s;
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.counter);
  },
};
</script>

Answer 1

See MDN:

dateString
A string value representing a date, specified in a format recognized by the Date.parse() method.

And then parse:

It is not recommended to use Date.parse as until ES5, parsing of strings was entirely implementation dependent. There are still many differences in how different hosts parse date strings, therefore date strings should be manually parsed (a library can help if many different formats are to be accommodated).

---

And that is your problem. Different implementations support different date formats and the one you are using isn't supported by Firefox.

Use a library instead.

e.g. moment:

const date = moment('Oct 20, 2020 00:00:00:00', 'MMM DD, YYYY HH:mm:ss:SS')