React Moment 减去时间格式

Question

我有以下函数来计算开始和结束之间的时间（这只是输入字段）。

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

一般来说，计算是有效的。该值通过输入字段设置，状态更新为输入的值。如此处所示：

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

设置开始状态的函数（设置结束值类似，只是调用了另一个函数来更新状态）

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

正如您在图片中看到的，值相差 12 小时

这里应该是 13:01 而不是 01:01

这里应该是 00:01 而不是 12:01

除了手动添加或删除 12h 之外，还有人知道如何解决这个问题吗？

Answer 1

这是工作代码：

  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;

};

现在，为什么您的代码不起作用是因为，您需要将 startDate 包装起来，

let time2 = moment(this.state.start, "hh:mm");
let subtract = time1.subtract(time2);

当试图同时做小时和分钟时。在单个函数中操作它也会添加语言环境时间，我没有看到任何禁用它的选项。如果你发现类似的东西，你也可以使用你的代码。 在要求您多次编辑问题后，我希望这会有所帮助。 :)

另外，看看你的用例，你应该考虑用时间减去日期，而不仅仅是时间 https://momentjscom.readthedocs.io/en/latest/moment/04-displaying/07-difference/