Search code examples
javascriptdatetimemomentjscountdown

creating a countdown with Moment.js, the days are off


I am currently creating a countdown for a website that will display the months/days/hours/minutes untill a set date.

It looks fine, as it displays: 1 MONTHS 5 DAYS 15 HOURS. But I tried to calculate it by hand and it should be 1 month, and 9 days. So i am missing a couple of days in the calculation.

I've tried multiple setups and even converted the datetime to ISO 8601 but to no avail. They all display the same months/days. I'm sure it's something small I am overlooking, but I can't find it.

The end date should be 16th of March 2023.

I have copied and cleaned the code from the project and placed it in a codepen (look in the console for the output).

let date = moment('2023-03-16T08:30:00+0100');

var dur = moment.duration( moment(date).diff(moment()) );

let yearsRemain = dur.years();
let monthsRemain = dur.months();
let daysRemain = dur.days();
let hoursRemain = dur.hours();
let minutesRemain = dur.minutes(); 
let secondsRemain = dur.seconds();

var dateArray = [
  yearsRemain,
  monthsRemain,
  daysRemain,
  hoursRemain,
  minutesRemain,
  secondsRemain
]

console.table(dateArray);

https://codepen.io/Skippy/pen/ExpJrmm

What am I doing wrong?


Solution

  • Instead of moment.js you can use Countdown.js please refer to the included snippet and check if it yields the expected result:

    let date = new Date('2023-03-16T08:30:00+0100');
    let cd = countdown(date).toString()
    $(".test").append(cd);
    .test{
      border: 1px solid red;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/countdown/2.6.0/countdown.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="test"></div>