2

我有很多天。

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"
/>

我怎样才能做到这一点？谢谢

4

2 回答 2

2

您将不得不使用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')
}

它使用了isSamemoment.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}
/>
于 2019-01-30T09:27:47.503 回答
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'));
}
于 2020-10-05T16:15:05.600 回答