0
210
ViewsReact Moment subtract time format
I have following function to calculate time between the start and the end (which are just input fields).
calculateTime() {
if(this.state.start !== '' && this.state.end !== ''){
let time1 = moment(this.state.end, "hh:mm");
let subtract = time1.subtract(this.state.start);
let format = moment(subtract).format("hh:mm");
console.log(format);
return format;
}
return 0;
}
In general the calculation works. The value gets set via a input field and the state gets updated to the entered value. As seen here:
<table>
<thead>
<tr>
<th>Date</th>
<th>Start</th>
<th>End</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="date" id="start" name="trip-start"
min="2022-01-01" max="2023-12-31" onChange={this.handleDate} value={this.state.date} />
</td>
<td>
<input type="text" onChange={this.handleStart} placeholder="hh:mm" maxLength={5} />
</td>
<td>
<input type="text" onChange={this.handleEnd} placeholder="hh:mm" maxLength={5} />
</td>
<td>
<p>{this.calculateTime()}</p>
</td>
</tr>
</tbody>
</table>
The function for setting the start state (setting the end value is similar except a other function gets called to update the state)
handleStart(event:any) {
this.setState({
start: event.target.value
});
}
As you can see in the pictures the values are off by 12h
Here it should be 13:01 instead of 01:01
Here it should be 00:01 instead of 12:01
Has anyone an idea how to fix that besides manually adding or removing the 12h?
1 answers
Answer question0
Here is the working code :
const calculateTime = () => {
if (this.state.start !== "" && this.state.end !== "") {
let time1 = moment(this.state.end, "hh:mm");
let time2 = moment(this.state.start, "hh:mm");
let hoursDiff = time1.diff(time2, "hours");
console.log("Hours:" + hoursDiff);
let minutesDiff = time1.diff(time2, "minutes");
console.log("Minutes:" + minutesDiff);
// let subtract = time1.subtract(time2);
// let format = subtract.format("hh:mm");
// console.log(format);
return `${hoursDiff} : ${minutesDiff}`;
}
return 0;
};
Now, why your code didn't worked is beacuse, you need to wrap your startDate with moment,
let time2 = moment(this.state.start, "hh:mm");
let subtract = time1.subtract(time2);
when trying to do the both hour and mins. operation in single function it's adding locale time as well , I don't see any option to disable that. if you find something like that, you can use your code as well. I hope this helps, after asking you to edit your question multiple times. :)
Also, looking at your use case, you should consider substracting the date with time , not just time https://momentjscom.readthedocs.io/en/latest/moment/04-displaying/07-difference/