Razvan Zamfir
Razvan Zamfir

Reputation: 4694

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

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>

Upvotes: 1

Views: 112

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337656

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>

Upvotes: 2

Felix
Felix

Reputation: 1566

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

Upvotes: 2

Related Questions