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

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>

CodePudding user response：

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> '

CodePudding user response：

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>