Flipclock Countdown Timer generates wrong calculation for the given date-CodePudding

Please, I am trying to use this Flip Clock Timer, but when I insert the specific date to initiate the countdown that I need to use, the calculation of days exceeds the sum of days.

Ex: There is an event dated to 10/15/2022. in just 10 days from today. And the Timer display 40 days instead of just 10 days.

What I have done wrong please? Could someone give a light? I thank you so much in advance.

Here is the whole JS code and the example running on codepen.

(function () {
  function FlipClock(el, config) {
    var _this = this;
    var updateTimeout;
    _this.el = el;
    _this.config = Object.assign({
      endDate: new Date((new Date().getFullYear()   1),0,0),
      labels: {
        days: 'Days',
        hours: 'Hours',
        minutes: 'Minutes',
        seconds: 'Seconds'
      }
    }, config);

    _this.current = {
      d: "000",
      h: "00",
      m: "00",
      s: "00"
    };

    createView();
    updateView();
    addObserver();
 
    function start() {
      _this.current = getTimeUntil(config.endDate.getTime(), new Date().getTime());
      updateView();
      clearTimeout(updateTimeout);
      updateTimeout = setTimeout(start, 500);
    }

    function stop() {
      clearTimeout(updateTimeout);
    }

    function destroy() {
      stop();
      _this.observer.disconnect();
      _this.el.innerHTML = "";
    }

    function getTimeUntil(dateFuture, dateNow) {
      var delta = Math.abs(dateFuture - dateNow) / 1000;
      var d = Math.floor(delta / 86400);
      delta -= d * 86400;
      var h = Math.floor(delta / 3600) % 24;
      delta -= h * 3600;
      var m = Math.floor(delta / 60) % 60;
      delta -= m * 60;
      var s = Math.floor(delta % 60);
 
      d = pad3(d);
      h = pad2(h);
      m = pad2(m);
      s = pad2(s);

      return {
        d: d   "",
        h: h   "",
        m: m   "",
        s: s   ""
      };
    }

    // Assumes a non-negative number.
    function pad2(number) {
      if (number < 10) return "0"   number;
      else return ""   number;
    }

    function pad3(number) {
      if (number < 10) return "00"   number;
      else if (number < 100) return "0"   number;
      else return ""   number;
    }

    function createView() {
      _this.daysLeaf = createLeaf(_this.config.labels.days, 3);
      _this.hoursLeaf = createLeaf(_this.config.labels.hours);
      _this.minutesLeaf = createLeaf(_this.config.labels.minutes);
      _this.secondsLeaf = createLeaf(_this.config.labels.seconds);
    }

    function createLeaf(label, digits) {
      var leaf = document.createElement("div");
      leaf.className = "leaf _"   (digits ? digits : "2")   "-digits";
      leaf.setAttribute("data-label", label);
      var top = document.createElement("div");
      var topLabel = document.createElement("span");
      top.className = "top";
      top.appendChild(topLabel);
      var frontLeaf = document.createElement("div");
      var frontLabel = document.createElement("span");
      frontLeaf.className = "leaf-front";
      frontLeaf.appendChild(frontLabel);
      var backLeaf = document.createElement("div");
      var backLabel = document.createElement("span");
      backLeaf.className = "leaf-back";
      backLeaf.appendChild(backLabel);
      var bottom = document.createElement("div");
      var bottomLabel = document.createElement("span");
      bottom.className = "bottom";
      bottom.appendChild(bottomLabel);

      leaf.appendChild(top);
      leaf.appendChild(frontLeaf);
      leaf.appendChild(backLeaf);
      leaf.appendChild(bottom);

      _this.el.appendChild(leaf);

      return {
        el: leaf,
        topLabel: topLabel,
        frontLabel: frontLabel,
        backLabel: backLabel,
        bottomLabel: bottomLabel
      };
    }

    function updateView() {
      updateLeaf(_this.daysLeaf, _this.current.d);
      updateLeaf(_this.hoursLeaf, _this.current.h);
      updateLeaf(_this.minutesLeaf, _this.current.m);
      updateLeaf(_this.secondsLeaf, _this.current.s);
    }

    function updateLeaf(leaf, value) {
      if (leaf.isFlipping) return;

      var currentValue = leaf.topLabel.innerText;
      if (value !== currentValue) {
        leaf.isFlipping = true;
        leaf.topLabel.innerText = value;
        leaf.backLabel.innerText = value;
        leaf.el.classList.add("flip");

        clearTimeout(leaf.timeout);
        leaf.timeout = setTimeout(function () {
          leaf.frontLabel.innerText = value;
          leaf.bottomLabel.innerText = value;
          leaf.el.classList.remove("flip");
        }, 600);

        clearTimeout(leaf.timeout2);
        leaf.timeout2 = setTimeout(function () {
          leaf.isFlipping = false;
        }, 1000);
      }
    }

    function addObserver() {
      _this.observer = new IntersectionObserver(function (entries, observer) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            start();
          } else {
            stop();
          }
        });
      });

      _this.observer.observe(_this.el);
    }

    return {
      start: start,
      stop: stop,
      destroy: destroy,
      getCurrent: function () {
        return _this.current;
      }
    };
  }
  
  
  //================================================
  // Initialise the Timer
  var currentYear = new Date().getFullYear();

  // FlipClock 1 Example: My Birthday
  new FlipClock(document.getElementById('flipclock-1'), {
    endDate: new Date(currentYear, 10, 15),
    labels: {
        days: 'Days',
        hours: 'Hours',
        minutes: 'Minutes',
        seconds: 'Seconds'
    }
  });   
  
})();

And here is where we can initialise the timer inserting the date:

// Initialise the countdown
  var currentYear = new Date().getFullYear();

// FlipClock 1 Example: Event My Birthday

  new FlipClock(document.getElementById('flipclock-1'), {
    endDate: new Date(currentYear, 10, 15),
    labels: {
        days: 'Days',
        hours: 'Hours',
        minutes: 'Minutes',
        seconds: 'Seconds'
    }
  });

Code running on codepen

https://codepen.io/paulodoporto/pen/QWrBOex

CodePudding user response：

According to the doc the 2nd parameter of the constructor is monthIndex .

Which is: Integer value representing the month, beginning with 0 for January to 11 for December.

So if you want the 10/15/2022, you have to do :

endDate: new Date(currentYear, 10 - 1, 15)

CodePudding user response：

The issue is that you aren’t accounting for zero based index.

October is 9 not 10