Получение разницы дней между двумя датами в React.js

1

Я работаю со средством выбора даты в реакции и внедрил дату начала и окончания, которая работает нормально. Теперь мне нужно получить разницу дней между двумя датами (между датами начала и окончания).

Здесь проблема. Каждый раз, когда я выбираю две даты, чтобы получить разницу в днях, отображаются только 0 дней инициализации. Я прибег к решению здесь

Но все же, покажите 0 дней по дате выбора элемента. На консоли не отображается сообщение об ошибке.

Вот мой код

//install the following
//npm i --save react-datepicker
//npm i --save moment

import React from "react";
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(),
      days: 0,
    };
    this.handleChangeEnd = this.handleChangeEnd.bind(this);
    this.handleChangeStart = this.handleChangeStart.bind(this);
    this.daysLeft = this.daysLeft.bind(this);

  }

  handleChangeStart(date) {
    this.setState({
      startDate: date
    });
  }


 handleChangeEnd(date) {
    this.setState({
      endDate: date
    });
  }


daysLeft() {
    let {startDate, endDate} = this.state;
    console.log(startDate);
    console.log(endDate);
    let amount = endDate.diff(startDate, 'days');
    this.setState({
      days: amount
    });
  }



  render() {
    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">
   {this.state.days}
 </div>

</div>
    );
  }
}
  • 1
    Вы использовали метод daysLeft для вычисления разницы в днях, но не вызывали его, когда startDate или endDate поэтому days никогда не обновляются.
  • 0
    Я понял, что произошла ошибка в моем предыдущем редактировании, пожалуйста, смотрите обновленный.
Теги:

1 ответ

0

Вы должны вызывать ваш метод daysLeft когда 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>
    );
  }
}
  • 0
    Привет, Ана Лиза, я реализовала ваше решение, но когда выбираю / выбираю даты. Входные данные формы Date исчезают, и это ошибка в консоли Uncaught TypeError: endDate.diff не является функцией в CheckDate.daysLeft.
  • 0
    пожалуйста, вы можете помочь мне дальше. Между Спасибо за помощь до сих пор. надеясь услышать от вас как можно скорее
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню