The MomentJS difference calculation is incorporating an additional hour

Question

The MomentJS difference calculation is incorporating an additional hour

I am currently working on a project that involves time calculations.

const currentCETTime = moment.tz('2020-03-18 15:58:38', 'Europe/Madrid');
const limitCETTime = moment.tz('2020-03-18 18:00:00', 'Europe/Madrid');
console.log('current',currentCETTime.format('HH:mm:ss'));
console.log('limit', limitCETTime.format('HH:mm:ss'));
const seconds = Math.abs(limitCETTime.diff(currentCETTime) / 1000);
console.log('hours', (seconds / 60) / 60);
const rem = moment(seconds * 1000);
console.log('diff', moment(rem).tz('Europe/Madrid').format('HH:mm'));

<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.min.js"></script>

Unfortunately, I have encountered an issue with the time difference calculation:

https://i.sstatic.net/nJNBW.png

The expected result is a difference of 2:01 hours instead of displaying as 03:01.

javascript momentjs moment-timezone

Answer 1

Answer №1

If you print out the entire date of rem, the issue becomes visible:

const currentCETTime = moment.tz('2020-03-18 15:58:38', 'Europe/Madrid');
const limitCETTime = moment.tz('2020-03-18 18:00:00', 'Europe/Madrid');
console.log('current',currentCETTime.format('HH:mm:ss'));
console.log('limit', limitCETTime.format('HH:mm:ss'));
const seconds = Math.abs(limitCETTime.diff(currentCETTime) / 1000);
console.log('hours', (seconds / 60) / 60);
const rem = moment(seconds * 1000);
console.log('diff', moment(rem).tz('Europe/Madrid').toString());

<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.min.js"></script>

When you call moment on a milliseconds value, it creates a new date from the epoch.

The difference in seconds is accurate. For the difference in hours, calling diff with the 'hours' argument would give you the result. It's important to note that moment rounds down to the nearest whole value.

const currentCETTime = moment.tz('2020-03-18 15:58:38', 'Europe/Madrid');
const limitCETTime = moment.tz('2020-03-18 18:00:00', 'Europe/Madrid');
console.log('current',currentCETTime.format('HH:mm:ss'));
console.log('limit', limitCETTime.format('HH:mm:ss'));
const hours = limitCETTime.diff(currentCETTime, 'hours');
console.log('hours', hours);

<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.min.js"></script>

Answer 2

If you print out the entire date of rem, the issue becomes visible:

const currentCETTime = moment.tz('2020-03-18 15:58:38', 'Europe/Madrid');
const limitCETTime = moment.tz('2020-03-18 18:00:00', 'Europe/Madrid');
console.log('current',currentCETTime.format('HH:mm:ss'));
console.log('limit', limitCETTime.format('HH:mm:ss'));
const seconds = Math.abs(limitCETTime.diff(currentCETTime) / 1000);
console.log('hours', (seconds / 60) / 60);
const rem = moment(seconds * 1000);
console.log('diff', moment(rem).tz('Europe/Madrid').toString());

<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.min.js"></script>

When you call moment on a milliseconds value, it creates a new date from the epoch.

The difference in seconds is accurate. For the difference in hours, calling diff with the 'hours' argument would give you the result. It's important to note that moment rounds down to the nearest whole value.

const currentCETTime = moment.tz('2020-03-18 15:58:38', 'Europe/Madrid');
const limitCETTime = moment.tz('2020-03-18 18:00:00', 'Europe/Madrid');
console.log('current',currentCETTime.format('HH:mm:ss'));
console.log('limit', limitCETTime.format('HH:mm:ss'));
const hours = limitCETTime.diff(currentCETTime, 'hours');
console.log('hours', hours);

<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.min.js"></script>

Answer 3

Answer №2

For just displaying the hour and second, there is no need to involve timezones. Simply call utc and then format the time. See the example code snippet below.

const currentCETTime = moment.tz('2020-03-18 15:58:38', 'Europe/Madrid');
const limitCETTime = moment.tz('2020-03-18 18:00:00', 'Europe/Madrid');
console.log('current',currentCETTime.format('HH:mm:ss'));
console.log('limit', limitCETTime.format('HH:mm:ss'));
const seconds = Math.abs(limitCETTime.diff(currentCETTime) / 1000);
console.log('hours', (seconds / 60) / 60);
const rem = moment(seconds * 1000);
console.log('diff', moment(rem).utc().format('HH:mm'));

<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.min.js"></script>

Answer 4

For just displaying the hour and second, there is no need to involve timezones. Simply call utc and then format the time. See the example code snippet below.

const currentCETTime = moment.tz('2020-03-18 15:58:38', 'Europe/Madrid');
const limitCETTime = moment.tz('2020-03-18 18:00:00', 'Europe/Madrid');
console.log('current',currentCETTime.format('HH:mm:ss'));
console.log('limit', limitCETTime.format('HH:mm:ss'));
const seconds = Math.abs(limitCETTime.diff(currentCETTime) / 1000);
console.log('hours', (seconds / 60) / 60);
const rem = moment(seconds * 1000);
console.log('diff', moment(rem).utc().format('HH:mm'));

<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.min.js"></script>

Answer 5

Answer №3

When using the moment(milliseconds) function

, both the regular and tz variants will add the milliseconds to the date 1970-01-01 01:00:00. According to the unix timestamp parser documentation, this is the expected behavior for this method. As a result, when the output is formatted, it may appear as if there is an extra hour included. This is because the calculation starts at hour 1 rather than hour 0. To verify this behavior, try passing in 0 for the total number of milliseconds and observe that the function still returns an hour value of 1.

Answer 6

When using the moment(milliseconds) function

, both the regular and tz variants will add the milliseconds to the date 1970-01-01 01:00:00. According to the unix timestamp parser documentation, this is the expected behavior for this method. As a result, when the output is formatted, it may appear as if there is an extra hour included. This is because the calculation starts at hour 1 rather than hour 0. To verify this behavior, try passing in 0 for the total number of milliseconds and observe that the function still returns an hour value of 1.

The MomentJS difference calculation is incorporating an additional hour

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to update the input box value with a variable using jquery?

absence of data in ajax response (or HTTP status code 206 Partial Content)

What is the best way to create JavaScript code specifically for devices with a maximum width of 520px?

How can I create a static navigation bar and sidebar using Bootstrap 4?

Disconnecting a Metamask Wallet in an Angular application: A Step-by-

Looking to add a dynamic drop-down menu to my search bar, similar to Google search

Incorporating a HTML layout with a JS backdrop

Is it possible to populate an empty list of objects within the Page_Load scope after the page has finished loading?

Increase the size of the grid system column upon clicking on a Bootstrap icon

why is it that I am not achieving the expected results in certain areas of my work?

React Native tutorial: Changing button color on press

What is the exact functioning of the Array.push() method in Javascript?

Discovering the method to access a local function within a static function in Javascript ES6 (ES2015) or Typescript

Encountering TypeScript error TS2345 while attempting to reject a Promise with an error

When utilizing the data property within the useQuery() hook, an error may arise stating "Unable to

Prevent empty comments in Vue.js

Transferring information from a client-side JavaScript to a Node.js Express server and receiving back

The problem with setting headers in Node Express MySQL: Error message indicating headers cannot be set after they have been sent

Finding the Middle Point of a Circle Using CEP/JavaScript

JavaScript library called "Error: JSON input ended unexpectedly"