incorrect calculation of date difference using momentjs

Question

incorrect calculation of date difference using momentjs

Currently utilizing countdown.js for a project where I need to add 60 days to a date fetched from the database. Successfully implemented this in the targetDay variable and it's functioning properly. However, when attempting to calculate this date from the current date, an unexpected result of

"1969-11-05T21:24:07.416Z"

is being returned - why?

const nowDate = moment();
const targetDay = moment('2020-10-24 14:25:26').add('60', 'days');
const countdown = moment(nowDate - targetDay);


console.log(countdown);
//const diff = targetDay.fromNow();

const count_days = countdown.format('D');
const count_hours = countdown.format('HH');
const count_minutes = countdown.format('mm');
const count_seconds = countdown.format('ss');
console.log(count_days + ' days:' + count_hours + ' hrs:' + count_minutes + ' m:' + count_seconds + ' s');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Experimented with the fromNow() function, but it only returns as a string. My objective is to create a countdown to the target day starting from the present time.

javascript momentjs

Answer 1

Answer №1

To determine the remaining time, you can use the .duration() method along with .hours(), .minutes(), and .seconds() to extract the respective values from the milliseconds.

Check out this link for more information on durations in Moment.js

const nowDate = moment();
const targetDay = moment('2030-10-24 14:25:26').add('60', 'days'); // I changed to 2030 to keep this snippet live for future ;)
const countdown = moment.duration(targetDay.diff(nowDate));
const count_days = Math.floor(countdown.asDays());
const count_hours = countdown.hours();
const count_minutes = countdown.minutes();
const count_seconds = countdown.seconds();
$('div').text(count_days + ' days:' + count_hours + ' hrs:' + count_minutes + ' m:' + count_seconds + ' s');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<div></div>

For demonstration purposes, it is advised to remove the setInterval function from your code.

I updated the year to 2030 for the longevity of this example ;)

Answer 2

To determine the remaining time, you can use the .duration() method along with .hours(), .minutes(), and .seconds() to extract the respective values from the milliseconds.

Check out this link for more information on durations in Moment.js

const nowDate = moment();
const targetDay = moment('2030-10-24 14:25:26').add('60', 'days'); // I changed to 2030 to keep this snippet live for future ;)
const countdown = moment.duration(targetDay.diff(nowDate));
const count_days = Math.floor(countdown.asDays());
const count_hours = countdown.hours();
const count_minutes = countdown.minutes();
const count_seconds = countdown.seconds();
$('div').text(count_days + ' days:' + count_hours + ' hrs:' + count_minutes + ' m:' + count_seconds + ' s');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<div></div>

For demonstration purposes, it is advised to remove the setInterval function from your code.

I updated the year to 2030 for the longevity of this example ;)

Answer 3

Answer №2

Opt for using moment.diff() over manual mathematical subtraction.

This method will result in a moment.duration (usually in milliseconds).

const nowDate = moment();
const targetDay = moment('2020-10-24 14:25:26').add('60', 'days');
const countdownDiff = targetDay.diff(nowDate)
// 4855463420

Make sure to keep your constants as durations since the added difference is not directly a duration itself.

For example, adding 60 days to 28 October results in 28 December. However, moment('28-12-2020').format('D') will be 28, not the desired 60.

To handle this, separate and store them individually as differences.

const count_days = targetDay.diff(nowDate, 'd');
const count_hours = targetDay.diff(nowDate, 'h');
const count_minutes = targetDay.diff(nowDate, 'm');
const count_seconds = targetDay.diff(nowDate, 's');

If you need to convert it back to a moment object, simply add the difference to the original one as shown below.

const countdown = nowDate.add(countdownDiff, 'ms')
// While redundant, this clearly illustrates the calculation of diff

Below is a functional example:

const nowDate = moment();
const targetDay = moment('2020-10-24 14:25:26').add('60', 'days');
const countdownDiff = targetDay.diff(nowDate)
// 4855463420


const countdown = moment(nowDate).add(countdownDiff, 'ms')
// This line mirrors targetDay

const count_days = targetDay.diff(nowDate, 'days');
const count_hours = targetDay.diff(nowDate, 'h');
const count_minutes = targetDay.diff(nowDate, 'm');
const count_seconds = targetDay.diff(nowDate, 's');

console.log('Current day:', nowDate.format('Do MMM YYYY HH:mm'));
console.log('Target day:', targetDay.format('Do MMM YYYY HH:mm'));
console.log('Countdown end date', countdown.format('Do MMM YYYY HH:mm'));

console.log(count_days + ' days:' + count_hours + ' hrs:' + count_minutes + ' m:' + count_seconds + ' s');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Answer 4

Opt for using moment.diff() over manual mathematical subtraction.

This method will result in a moment.duration (usually in milliseconds).

const nowDate = moment();
const targetDay = moment('2020-10-24 14:25:26').add('60', 'days');
const countdownDiff = targetDay.diff(nowDate)
// 4855463420

Make sure to keep your constants as durations since the added difference is not directly a duration itself.

For example, adding 60 days to 28 October results in 28 December. However, moment('28-12-2020').format('D') will be 28, not the desired 60.

To handle this, separate and store them individually as differences.

const count_days = targetDay.diff(nowDate, 'd');
const count_hours = targetDay.diff(nowDate, 'h');
const count_minutes = targetDay.diff(nowDate, 'm');
const count_seconds = targetDay.diff(nowDate, 's');

If you need to convert it back to a moment object, simply add the difference to the original one as shown below.

const countdown = nowDate.add(countdownDiff, 'ms')
// While redundant, this clearly illustrates the calculation of diff

Below is a functional example:

const nowDate = moment();
const targetDay = moment('2020-10-24 14:25:26').add('60', 'days');
const countdownDiff = targetDay.diff(nowDate)
// 4855463420


const countdown = moment(nowDate).add(countdownDiff, 'ms')
// This line mirrors targetDay

const count_days = targetDay.diff(nowDate, 'days');
const count_hours = targetDay.diff(nowDate, 'h');
const count_minutes = targetDay.diff(nowDate, 'm');
const count_seconds = targetDay.diff(nowDate, 's');

console.log('Current day:', nowDate.format('Do MMM YYYY HH:mm'));
console.log('Target day:', targetDay.format('Do MMM YYYY HH:mm'));
console.log('Countdown end date', countdown.format('Do MMM YYYY HH:mm'));

console.log(count_days + ' days:' + count_hours + ' hrs:' + count_minutes + ' m:' + count_seconds + ' s');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

incorrect calculation of date difference using momentjs

Answer №1

Answer №2

Similar questions

Sending a JavaScript variable to a Flask url_for function

How to create a fresh factory instance in Angular Js

What is the best way to implement Angular 2 slash routes in conjunction with Node Express?

Is it best to remove trailing/leading whitespace from user input before insertion into the database or during the input process?

A guide to dynamically extracting values from JSON objects using JavaScript

Refresh web content dynamically without having to reload the entire page using JavaScript

Avoid including package-lock.json file in GitHub contribution history

Issue with draggable div containing gmap not functioning on mobile browsers

Output a message to the Java console once my Selenium-created Javascript callback is triggered

Steps to implement jQuery after executing the command "npm install jquery"

Techniques for removing a label value using JavaScript

Unable to set $_POST value when using $.ajax post request

Lock the initial column in an HTML table

Is it possible for me to generate c3js graphs dynamically?

The loading cursor in IE7 flickers incessantly, causing the webpage to lag and become un

Having trouble getting my local website to load the CSS stylesheet through Express and Node.js in my browser

The countdown timer resets upon the conditions being rendered

Having difficulty validating the field accurately with Angular.js

Showcasing two sets of data from an array using chart.js within a node.js environment

"Sharing fields between mongoose models: How can I reference a field from one model in another