How to add JSON dates object to disable days

Question

I am using this date picker component: https://react-day-picker.js.org/examples/disabled

In the below disabledDays section. I am unable to apply all three options. blockedDatesData is working alone but it is not working with daysOfWeek and before.

<DayPicker
        className={className}
        numberOfMonths={numberOfMonths}
        selectedDays={[from, { from, to }]}
        modifiers={ { 
          weekends: {daysOfWeek: [0, 6]},
          start: new Date(from), end: new Date(to) 
        }}
        onDayClick={handleDayClick}
        disabledDays={
            { daysOfWeek: [0, 6] },
            { before: disabledBefore},
            blockedDatesData
          }
    />

Here are the codes that are generating blockedDatesData json object.

getBlockedDatesData(){
    let url = API_URL+'blocked_dates'
    return fetch(url)
        .then(response => response.json())
        .then(result => {
            let blockedDatesData = result.data.map(function(row) {
                return {
                    after: new Date(row.date_from), 
                    before: new Date(row.date_to)
                };
            });
            return blockedDatesData;
        })
}

Please help me to fix this issue. thanks in advance

score 0 · Answer 1 · answered Dec 17 '19 at 17:07

0

You have to put an array of date in 'disabledDays' so you should have a thing like this :

<DayPicker
    className={className}
    numberOfMonths={numberOfMonths}
    selectedDays={[from, { from, to }]}
    modifiers={ { 
      weekends: {daysOfWeek: [0, 6]},
      start: new Date(from), end: new Date(to) 
    }}
    onDayClick={handleDayClick}
    disabledDays={[
        { daysOfWeek: [0, 6] },
        { before: disabledBefore},
        blockedDatesData
      ]}
/>

Here is an exemple :

answered Dec 17 '19 at 17:07

XwolfY

104
4

Thanks for your reply. I already checked it. Please see this screenshot for further details. https://www.screencast.com/t/7avMFO3LUM – Luke Dec 17 '19 at 19:16
Can you give me a console.log() of _disabledBefore_ and _blockedDatesData_ ? – XwolfY Dec 17 '19 at 19:23
Sure, please see these. blockedDatesData -> https://www.screencast.com/t/NNtDCLE23 disabledBefore -> https://www.screencast.com/t/FDNVOBwA – Luke Dec 17 '19 at 19:58

How to add JSON dates object to disable days

1 Answers1