[英]How to show only specific days react-dates
I have array of days.我有很多天。
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"]
I only want to show the above selected days in the airbnb datepicker and disable the other ones.我只想在 airbnb datepicker 中显示上述选定的日期并禁用其他日期。
<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"
/>
How can I do that?我怎样才能做到这一点? Thank you
谢谢
You will have to use the isDayBlocked
prop of the date picker.您将不得不使用日期选择器的
isDayBlocked
道具。 The following function will find if a day is contained inside your array, and return true
if it does not find any :以下函数将查找数组中是否包含一天,如果未找到则返回
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')
}
It uses the isSame
function of moment.js : https://momentjs.com/docs/#/query/is-same/它使用
isSame
函数: https ://momentjs.com/docs/#/query/is-same/
Then bind your function :然后绑定你的函数:
<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}
/>
The function mentioned above needs correction, but as the edit is less than 6 chars, the site is not allowing me to.上面提到的功能需要更正,但由于编辑少于6个字符,网站不允许我这样做。 So here is the correct version.
所以这是正确的版本。
day
is supposed to be supplied as the second parameter to moment's isSame
function day
应该作为第二个参数提供给 moment 的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'));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.