Question

我正在与日期选择器进行交互，并已实现了开始日期和结束日期，效果很好。现在我需要两个日期之间的天差（开始日期和结束日期之间）。

这是问题所在。每次我选择两个日期以获取天数差异时，它仅显示初始化的0天。我求助于解决方法here

但是，请在日期选择元素上显示 0天。控制台上没有显示错误消息。

这是我的代码

Shutdown

Answer 1

daysLeft或startDate中的任何一个更新时，都必须调用endDate方法，以便它也将更新状态的days。

handleChangeStart(date) {
  this.setState({
    startDate: date
  }, () => this.daysLeft());
}


handleChangeEnd(date) {
  this.setState({
    endDate: date
  }, () => this.daysLeft());
}

为了获得更好的代码可读性，您可能希望将方法名称从daysLeft更改为更合适的操作，例如calculateDaysLeft，getDaysLeft或您可以想到的更好的名称

编辑：

这是基于@Sulthan的评论的另一个实现。

如果days的用途仅是为了演示，那么您无需将其存储在状态上。相反，您可以将计算得出的days放入render方法本身。

在此处查看有效的实现： https://codesandbox.io/s/4w1496rp4

import React from "react";
import ReactDOM from "react-dom";
import moment from "moment";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

class CheckDate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date(),
      endDate: new Date()
    };
    this.handleChangeEnd = this.handleChangeEnd.bind(this);
    this.handleChangeStart = this.handleChangeStart.bind(this);
  }

  handleChangeStart(date) {
    this.setState({
      startDate: date
    });
  }

  handleChangeEnd(date) {
    this.setState({
      endDate: date
    });
  }

  calculateDaysLeft(startDate, endDate) {
    if (!moment.isMoment(startDate)) startDate = moment(startDate);
    if (!moment.isMoment(endDate)) endDate = moment(endDate);

    return endDate.diff(startDate, "days");
  }

  render() {
    const { startDate, endDate } = this.state;

    const daysLeft = this.calculateDaysLeft(startDate, endDate);
    return (
      <div>
        <h3>Get Difference between two dates in days</h3>
        <b>Start Date</b>:
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChangeStart}
        />
        &nbsp;&nbsp;&nbsp;
        <b>End Date</b>:
        <DatePicker
          selected={this.state.endDate}
          onChange={this.handleChangeEnd}
        />
        <div className="amount">{daysLeft}</div>
      </div>
    );
  }
}

在React.js中获取两个日期之间的天差

1 个答案:

编辑：