如何仅显示特定日期的反应日期
How to show only specific days react-dates
我有很多天。
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"
/>
我该怎么做?谢谢
您将不得不使用日期选择器的 isDayBlocked
道具。以下函数将查找您的数组中是否包含一天,如果没有找到 return 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}
/>
上面提到的功能需要修改,但是由于修改不到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'));
}
我有很多天。
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"
/>
我该怎么做?谢谢
您将不得不使用日期选择器的 isDayBlocked
道具。以下函数将查找您的数组中是否包含一天,如果没有找到 return 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}
/>
上面提到的功能需要修改,但是由于修改不到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'));
}