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;

};

现在，为什么你的代码不起作用是因为，你需要用 moment 包装你的 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/

React Moment 减去时间格式

React Moment subtract time format

javascript

momentjs

reactjs