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')
}

它使用moment.js的isSame函数：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'));
}

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

2 个答案: