Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flipclock Countdown Timer generates wrong calculation for the given date

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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)
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading