从React Datetime中的日期数组中获取特定日期

Question

有人知道我如何传递日期数组来反应日期时间吗？我正在尝试实现一个日期选择器，它可以显示我所在州的"预订"日期，但目前我只能禁用当前日期之前的所有日期。那么，我如何将状态中的日期传递给<Datetime/>，以便禁用它们呢？

'use strict';
import React       from 'react';
import {PropTypes} from 'prop-types';
import Datetime    from 'react-datetime';
class DatePicker extends React.Component {
constructor(props) {
super(props);
this.state = {
dates: [{id: 1, date: 'Apr 30 2020 09:00:00 AM'}, {id: 2, date: 'May 1 2020 12:00:00 PM'}]
};
}
render() {
const {t} = this.props;
let yesterday = Datetime.moment().subtract(1, 'day');
let valid = function (current) {
return current.isAfter(yesterday);
};
return (
<div className="date-picker">
<p>{t('Date Picker')}</p>
<Datetime timeFormat={false} isValidDate={valid(yesterday)}/>
</div>
);
}
}
export default DatePicker;

Answer 1

首先，状态中的日期格式有问题。尝试使用即时设置日期

this.state = {
dates: [{
id: 1,
date: Datetime.moment("30 Apr 2020")
},
{
id: 2,
date: Datetime.moment("01 May 2020")
}]
}

您的验证函数应该是这样的，或者您可以将其提取到类方法中

let valid = function(current, selected) {
return !this.state.dates.some(day => current.isSame(day.date, "day"));
};

并将此函数传递给Datetime

<Datetime timeFormat={false} isValidDate={valid}/>