reactjsreact-day-picker

Disable days from array with react-day-picker in react


I'm using react-day-picker and I try to disable an array of dates from an axios function like this :

this.state = {
  dateDisabled: [],
}

componentDidMount() {
axios.get(URL_GET_DATE)
  .then(response => {
    const date = response.data;
    this.setState({
      dateDisabled: date
    })
  })

}

Also my state dateDisabled become like this when I console.log:

(2) [{…}, {…}]
`0: date_arrivee: "2020-04-07T21:00:00.000Z" date_depart: "2020-04-10T21:00:00.000Z"
`1: date_arrivee: "2020-03-24T22:00:00.000Z"date_depart: "2020-03-30T21:00:00.000Z"

I would like to have the same result as here ->

disabledDays={[
    {
      after: new Date(2017, 3, 20),
      before: new Date(2017, 3, 25),
    },
  ]}
/>

Display days as disabled

How my dates could become before and after props ? Thank you and sorry for my bad english


Solution

  • You can simply map over the array to achieve this result:

    const dates = [{
      date_arrivee: "2020-04-07T21:00:00.000Z",
      date_depart: "2020-04-10T21:00:00.000Z"
    }, {
      date_arrivee: "2020-03-24T22:00:00.000Z",
      date_depart: "2020-03-30T21:00:00.000Z",
    }];
    
    const transformedDates = dates.map((date)=>{
      return {
        before: new Date(date.date_arrivee),
        after: new Date(date.date_depart),
      }
    });
    
    console.log(transformedDates);

    You can set the transformedDates to state and then feed this to React Day Picker.