Search code examples
javascriptreactjsreact-day-picker

Combine off days, past days and array of customized days to be disabled in day-picker


I am new with reactjs. I would like to seek some guidance on how to disable days on react-day-picker with the following criteria:

  1. Off days
  2. Past days
  3. An array of dates (to be fetched on backend)

Sample code:

const selectedDays = [new Date(2020,01,01), new Date(2020,01,02)]

< DayPicker disabledDays={[{ daysOfWeek: dayOffs }, {before: new Date()}, selectedDays]} >

Any help is very much appreciated :)


Solution

  • The days retrieved from the server will most likely not be date objects, so they need to be converted (with the map function). Then they need to be merged into the array (... spread operator).

    < DayPicker disabledDays={[{ daysOfWeek: dayOffs }, {before: new Date()}, ...selectedDays.map(day=>new Date(day))]} >