Why does this usage of jQuery.countdown show the wrong date difference?

user_4512005 0
Viewed 84

I have put together a countdown with the help of the jQuery.countdown plugin. The goal is to count the from the current date until this year's Christmas.

The result, as you can see, is very much off-target. Where is my mistake?

function doCountDown(countDownContainer, endDate) {
  $(countDownContainer).countdown(endDate, function(event) {
    $(this).html(event.strftime('<ul class="list-unstyled clock">' +
      '<li class="days"><span>%-d</span><span>days</span></li> ' +
      '<li class="hrs"><span>%H</span><span>hours</span></li> ' +
      '<li class="mins"><span>%M</span><span>minutes</span></li> ' +
      '<li class="seconds"><span>%S</span><span>seconds</span></li></ul>'));
  });
}

doCountDown('#count_down', '2021/12/25');
.clock {
  display: inline-flex;
}

.clock li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 4px;
  font-weight: bold;
  color: #efefef;
  background: #343434;
  border-radius: 3px;
}

.clock li span {
  line-height: 1;
}

.clock li span:last-child {
  font-size: 10px;
  padding: 5px 0;
  text-transform: uppercase;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="conrainer">
  <div class="text-center">
    <h1 class="h4 my-3">Party starts in...</h1>
    <div id="count_down"></div>
  </div>
</div>

html jquery javascript
2 Answers

If I could make a guess based on the example in the plugin I think you're missing the amount of weeks. Something like this?

  '<li class="weeks"><span>%-w</span><span>weeks</span></li> '
user_52439830

According to the documentation %-d in the formatter takes in to account the number of weeks remaining too. I.e. 6 weeks and 1 day would be just '1 day' shown in %-d.

To correct this use %-D which is the total number of days until the end date:

function doCountDown(countDownContainer, endDate) {
  $(countDownContainer).countdown(endDate, function(event) {
    $(this).html(event.strftime('<ul class="list-unstyled clock">' +
      '<li class="days"><span>%-D</span><span>days</span></li> ' +
      '<li class="hrs"><span>%H</span><span>hours</span></li> ' +
      '<li class="mins"><span>%M</span><span>minutes</span></li> ' +
      '<li class="seconds"><span>%S</span><span>seconds</span></li></ul>'));
  });
}


doCountDown('#count_down', '2021-12-25');
.clock {
  display: inline-flex;
}

.clock li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 4px;
  font-weight: bold;
  color: #efefef;
  background: #343434;
  border-radius: 3px;
}

.clock li span {
  line-height: 1;
}

.clock li span:last-child {
  font-size: 10px;
  padding: 5px 0;
  text-transform: uppercase;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="conrainer">
  <div class="text-center">
    <h1 class="h4 my-3">Party starts in...</h1>
    <div id="count_down"></div>
  </div>
</div>

user_5194130
Related