Tengo la siguiente función para calcular el tiempo entre el inicio y el final (que son solo campos de entrada).

 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; }

En general, el cálculo funciona. El valor se establece a través de un campo de entrada y el estado se actualiza al valor ingresado. Como se ve aquí:

 <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>

La función para establecer el estado inicial (establecer el valor final es similar excepto que se llama a otra función para actualizar el estado)

 handleStart(event:any) { this.setState({ start: event.target.value }); }

Como puede ver en las imágenes, los valores están apagados a las 12 h.

Aquí debería ser 13:01 en lugar de 01:01

Aquí debería ser 00:01 en lugar de 12:01

¿Alguien tiene alguna idea de cómo solucionarlo además de agregar o eliminar manualmente las 12 h?