CODEWITHSUNDEEP
reactjsreact-day-picker
Dessuane
Dessuane

Reputation: 85

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

Upvotes: 0

Views: 437

Answers (1)

Agney
Agney

Reputation: 19194

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.

Upvotes: 1

Related Questions