如何仅显示特定日期的反应日期

Question

我有几天的数组。

const availableDates = ["2019-02-01", "2019-02-04", "2019-02-05", "2019-02-06", "2019-02-07", "2019-02-11", "2019-02-12", "2019-02-13", "2019-02-14", "2019-02-15", "2019-02-19", "2019-02-20", "2019-02-21", "2019-02-22", "2019-02-23", "2019-02-25", "2019-02-26", "2019-02-27", "2019-02-28", "2019-03-01", "2019-03-04", "2019-03-05", "2019-03-06", "2019-03-07", "2019-03-08", "2019-03-09", "2019-03-11", "2019-03-12"]

我只想在Airbnb日期选择器中显示上述选定的日期并禁用其他日期。

<SingleDatePicker
    date={moment()}
    onDateChange={date => this.setState({ date })} 
    focused={this.state.focused} 
    onFocusChange={({ focused }) => this.setState({ focused })}
    id="your_unique_id"
    numberOfMonths={1}
    renderCalendarDay={() => availableDates.map(d => moment(d).format(d))}
    className="select-btn selectbtn-picker"
/>

我该怎么做？谢谢

Answer 1

您必须使用日期选择器的isDayBlocked道具。以下函数将查找数组中是否包含一天，如果找不到任何，则返回true：

isBlocked = day => {
    const availableDates = ["2019-02-01", "2019-02-04", "2019-02-05", "2019-02-06", "2019-02-07", "2019-02-11", "2019-02-12", "2019-02-13", "2019-02-14", "2019-02-15", "2019-02-19", "2019-02-20", "2019-02-21", "2019-02-22", "2019-02-23", "2019-02-25", "2019-02-26", "2019-02-27", "2019-02-28", "2019-03-01", "2019-03-04", "2019-03-05", "2019-03-06", "2019-03-07", "2019-03-08", "2019-03-09", "2019-03-11", "2019-03-12"]
    return !availableDates.some(date => day.isSame(date), 'day')
}

它使用矩的isSame函数.js：https://momentjs.com/docs/#/query/is-same/

然后绑定你的函数：

<SingleDatePicker
    date={moment()}
    onDateChange={date => this.setState({ date })} 
    focused={this.state.focused} 
    onFocusChange={({ focused }) => this.setState({ focused })}
    id="your_unique_id"
    numberOfMonths={1}
    renderCalendarDay={() => availableDates.map(d => moment(d).format(d))}
    className="select-btn selectbtn-picker"
    isDayBlocked={this.isBlocked}
/>

Answer 2

上面

提到的功能需要更正，但由于编辑少于 6 个字符，网站不允许我这样做。所以这是正确的版本。

day应该作为矩isSame函数的第二个参数提供

isBlocked = day => {
    const availableDates = ["2019-02-01", "2019-02-04", "2019-02-05", "2019-02-06", "2019-02-07", "2019-02-11", "2019-02-12", "2019-02-13", "2019-02-14", "2019-02-15", "2019-02-19", "2019-02-20", "2019-02-21", "2019-02-22", "2019-02-23", "2019-02-25", "2019-02-26", "2019-02-27", "2019-02-28", "2019-03-01", "2019-03-04", "2019-03-05", "2019-03-06", "2019-03-07", "2019-03-08", "2019-03-09", "2019-03-11", "2019-03-12"];
    return !availableDates.some(date => day.isSame(date, 'day'));
}