Я работаю со средством выбора даты в реакции и внедрил дату начала и окончания, которая работает нормально. Теперь мне нужно получить разницу дней между двумя датами (между датами начала и окончания).
Здесь проблема. Каждый раз, когда я выбираю две даты, чтобы получить разницу в днях, отображаются только 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}
/>
<b>End Date</b>:
<DatePicker
selected={this.state.endDate}
onChange={this.handleChangeEnd}
/>
<div className="amount">
{this.state.days}
</div>
</div>
);
}
}
Вы должны вызывать ваш метод 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}
/>
<b>End Date</b>:
<DatePicker
selected={this.state.endDate}
onChange={this.handleChangeEnd}
/>
<div className="amount">{daysLeft}</div>
</div>
);
}
}
daysLeft
для вычисления разницы в днях, но не вызывали его, когдаstartDate
илиendDate
поэтомуdays
никогда не обновляются.