Issue with Moment.js: inability to append hours and minutes to a designated time

Question

Issue with Moment.js: inability to append hours and minutes to a designated time

I have a starting time and I need to add an ending time to it. For example:

start=19:09
end=00:51 // 0 hours and 51 minutes

I want to add the 51 minutes to the 19:09 to make it 20:00.

I've attempted several different methods as shown below, but none are producing the correct time.

I tried:

let [hour, minute] = end.split(':').map(Number);
this.end = Moment(start).add({ hour: 'hours', minute: 'minutes' }) // also tried .add(hour,'hours').add(minute,'minutes')

which still results in 19:09. It seems to be disregarding my end time.

I also tried:

Moment(end, 'hh:mm').add(Moment.duration(start)).format("hh:mm");

which gives me an output of 08:00 when it should be 20:00

What am I missing? I want to add the end time to a start time. Keep in mind that the end time is always changing, sometimes being 13:05, etc. because it's based on user input.

javascript typescript momentjs

Answer 1

Answer №1

There are several key issues with the provided code:

The practice of creating a moment using only a timestamp (e.g. moment('19:09') without a date) is now deprecated and will result in an error. To resolve this, it is necessary to enter a fully defined timestamp in RFC2822 or ISO format, or explicitly specify the input format to the library.
In the object passed to the add() function, the values being passed in are as follows:
```
{
  hour: "hours", 
  minute: "minutes"
}
```
This means instead of providing numerical values for hours and minutes to add to your moment instance, strings such as "hours" and "minutes" are being passed, which momentsjs cannot process.
The format hh:mm restricts hours to be between 0 and 12. If you require a 24-hour clock, it is essential to use HH:mm.

When addressing these concerns, the code snippet below functions correctly:

let start = '2021-01-07 19:09', 
    duration = '0:51', 
    starttime = '19:09';

let [hour, minute] = duration.split(":");

//shorthand initialization for the argument
let endtime1 = moment(start).add({hour, minute}).toString(); 

//explicit definition of property names
let endtime2 = moment(start).add({hours: hour, minutes: minute}).toString(); 

//add hours and minutes separately
let endtime3 = moment(start).add(hour, "hours").add(minute, "minutes").toString(); 

//provide a format for the timestamp. momentsjs will take the current date for the date value
let endtime4 = moment(starttime, "HH:mm").add(hour, "hours").add(minute, "minutes").toString();

console.log(endtime1);
console.log(endtime2);
console.log(endtime3);
console.log(endtime4);

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

It's also important to note that when specifying which part of the timestamp to manipulate, singular or plural terminology can be used. For example,

moment(...).add(4, "hour").add(17, "minute")

and

moment(...).add({hour: 4, minute: 17})

are equivalent to

moment(...).add(4, "hours").add(17, "minutes")

and

moment(...).add({hours: 4, minutes: 17})

as demonstrated in the snippet through the creation of endtime1 and endtime2

Answer 2

There are several key issues with the provided code:

The practice of creating a moment using only a timestamp (e.g. moment('19:09') without a date) is now deprecated and will result in an error. To resolve this, it is necessary to enter a fully defined timestamp in RFC2822 or ISO format, or explicitly specify the input format to the library.
In the object passed to the add() function, the values being passed in are as follows:
```
{
  hour: "hours", 
  minute: "minutes"
}
```
This means instead of providing numerical values for hours and minutes to add to your moment instance, strings such as "hours" and "minutes" are being passed, which momentsjs cannot process.
The format hh:mm restricts hours to be between 0 and 12. If you require a 24-hour clock, it is essential to use HH:mm.

When addressing these concerns, the code snippet below functions correctly:

let start = '2021-01-07 19:09', 
    duration = '0:51', 
    starttime = '19:09';

let [hour, minute] = duration.split(":");

//shorthand initialization for the argument
let endtime1 = moment(start).add({hour, minute}).toString(); 

//explicit definition of property names
let endtime2 = moment(start).add({hours: hour, minutes: minute}).toString(); 

//add hours and minutes separately
let endtime3 = moment(start).add(hour, "hours").add(minute, "minutes").toString(); 

//provide a format for the timestamp. momentsjs will take the current date for the date value
let endtime4 = moment(starttime, "HH:mm").add(hour, "hours").add(minute, "minutes").toString();

console.log(endtime1);
console.log(endtime2);
console.log(endtime3);
console.log(endtime4);

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

It's also important to note that when specifying which part of the timestamp to manipulate, singular or plural terminology can be used. For example,

moment(...).add(4, "hour").add(17, "minute")

and

moment(...).add({hour: 4, minute: 17})

are equivalent to

moment(...).add(4, "hours").add(17, "minutes")

and

moment(...).add({hours: 4, minutes: 17})

as demonstrated in the snippet through the creation of endtime1 and endtime2

Answer 3

Answer №2

To accurately add time duration, ensure you convert it into a single unit such as minutes, seconds, or days. Once converted, use the snippet below.

Utilize moment methods for duration conversion

const mins = moment.duration(10, "hour").asMinutes();

const someTime = moment('19:09',"HH:mm");

const data = someTime.add('51','minutes').format("HH:mm")

//A more efficient solution would be
const data2 = someTime.add(1, "hours").add(51, "minutes").format("HH:mm")
console.log(data)
console.log(data2)

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

Answer 4

To accurately add time duration, ensure you convert it into a single unit such as minutes, seconds, or days. Once converted, use the snippet below.

Utilize moment methods for duration conversion

const mins = moment.duration(10, "hour").asMinutes();

const someTime = moment('19:09',"HH:mm");

const data = someTime.add('51','minutes').format("HH:mm")

//A more efficient solution would be
const data2 = someTime.add(1, "hours").add(51, "minutes").format("HH:mm")
console.log(data)
console.log(data2)

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

Issue with Moment.js: inability to append hours and minutes to a designated time

Answer №1

Answer №2

Similar questions

What is the process of setting up a subelement in a Vue array?

I keep encountering the issue where I receive the message "Unable to access property 'innerText' of an undefined element" when running the Array forEach function. This problem seems to be happening within the HTMLInputElement section of the code

Present a pop-up notification box with a countdown of 30 seconds prior to the expiration of a session timeout in JSF

Next.js has a problem where it displays incorrect data when users navigate rapidly between pages

Leveraging Next.js ISR to pass extra information to the getStaticProps function from the getStaticPaths

Is the parent component not triggering the function properly?

Experiencing issues with creating HTML using JavaScript?

Ajax is displaying some unusual behavior

Having trouble adjusting the width and height of images to a full 100% scale

Utilize the context API to efficiently share information from the parent to both its children and sibling children

How to set return types when converting an Array to a dynamic key Object in Typescript?

What is the best method to make the first input field the focus in BootStrap?

Is requesting transclusion in an Angular directive necessary?

What could be causing the React state to not function properly when using data from an external class?

Using jQuery to reload the page following a PHP form submission

Is there a way to set the AutoComplete control in Material-UI as mandatory?

Exploring ways to access elements within shadow-root (open) in Angular using SVG.js

Exploring the process of navigating between pages in Next.js using react-router-dom

Issue with dynamic dropdown selection causing element to not display

Switch the ng-bind-html option