0

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 :)

manuell
  • 7,528
  • 5
  • 31
  • 58
acl
  • 23
  • 3

1 Answers1

1

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))]} >
user120242
  • 14,918
  • 3
  • 38
  • 52
  • Hello, thank you so much for your time on helping me out :) apologies but I forgot to tell that selectedDays is already an array of Dates converted. I have also tried to use mock data just to be sure const selectedDays = [new Date(2020,3,20), new Date(2020,3,22)]; – acl Apr 14 '20 at 03:17
  • just replace the map with ...selectedDays. it should work – user120242 Apr 14 '20 at 03:41
  • Hi again, I have tried that and it is not working const selectedDays = [new Date(2020,3,20), new Date(2020,3,22)]; disabledDays={[{ daysOfWeek: dayOffs }, {before: today}, selectedDays]} – acl Apr 14 '20 at 04:08
  • disabledDays={[{ daysOfWeek: dayOffs }, {before: today}, ...selectedDays]} – user120242 Apr 14 '20 at 04:09
  • or disabledDays={[{ daysOfWeek: dayOffs }, {before: today}].concat(selectedDays)} – user120242 Apr 14 '20 at 04:10