React Moment subtract time format

user_9052518 0
Viewed 237

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 Example

Here it should be 13:01 instead of 01:01

enter image description here

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?

momentjs reactjs javascript
1 Answers

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/

user_138896160
Related