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.
<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
Advertisement
Answer
You will have to use the isDayBlocked
prop of the date picker. The following function will find if a day is contained inside your array, and return true
if it does not find any :
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/
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} />