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

Tips for leveraging OOP to eliminate redundant code repetition

How can I tally the frequency of characters in a given string using Javascript and output them as numerical values?

The default value of components in Next.js

Troubleshooting issues with environment variables in Next.js version 12.2.2

Exploring VueJS templating: Loading external templates

Tips for allowing divs to be dragged and resized within table cells and rows

There are three pop-up windows displayed on the screen. When each one is clicked, they open as intended, but the information inside does not

What could be the reason why my sorting function is not functioning properly?

Tips for breaking apart elements of a JavaScript array when a specific delimiter is present in an object property

Error in Angular 2: The app.component.html file triggered an exception at line 1, character 108 due to excessive recursion

Stopping JavaScript when scrolling to the top and running it only when not at the top

Innovative form creation using Vue.js

What could be the reason for the three.js scene failing to render in my Svelte application?

Exploring a JSON file to generate a customized array for implementing autocomplete functionality in jQuery

Issues persist with debugger functionality in browser development tools following an upgrade from Angular 8 to version 15

Tips for automatically refreshing a Next.js application following an update in an external library

A guide on showcasing nested arrays data in an Angular application

How can I align rectangles with different heights to display side by side using Javascript?

Conceal component while navigating in VueJs

What is the significance of using index 0 for caching an ID in jquery?