Tengo la aplicación Laravel que devuelve una respuesta json de fechas y días de la semana que deben deshabilitarse en el selector de fechas
Por ejemplo, esta es mi constante de fecha y hora cuando hago console.log() it ['2022-05-08', '2022-05-11', '2022-05-19']
Y esto es daysOff constante cuando console.log() it [3, 6]
Entonces, ¿cómo desactivo las fechas y los días devueltos (miércoles y domingo en este caso)?
useEffect(() => { axios.get(bookingUrl).then((response) => { setDaysOff(response.data.daysOff); setDatesOff(response.data.datesOff); setBooked(response.data.booked); }) }, []); <LocalizationProvider locale={hr} dateAdapter={AdapterDateFns}> <DatePicker label="Date" disablePast={true} minDate={minDate} maxDate={maxDate} value={date} shouldDisableDate={//What do i to here } onChange={(newDate) => { setDate(newDate); }} renderInput={(params) => <TextField {...params} />}DatePicker tiene un accesorio renderDay que podemos usar para personalizar las celdas de día del calendario. Se necesitan 3 argumentos, el primero es el objeto Fecha, que podemos usar para comparar con la matriz de fechas que debe deshabilitarse:
const dates = ["2022-05-08", "2022-05-11", "2022-05-19"]; const customDayRenderer = ( date: Date, selectedDates: Array<Date | null>, pickersDayProps: PickersDayProps<Date> ) => { const stringifiedDate = date.toISOString().slice(0, 10); if (dates.includes(stringifiedDate)) { return <PickersDay {...pickersDayProps} disabled />; } return <PickersDay {...pickersDayProps} />; }; return ( <LocalizationProvider dateAdapter={AdapterDateFns}> <DatePicker label="Basic example" value={value} onChange={(newValue) => { setValue(newValue); }} renderInput={(params) => <TextField {...params} />} renderDay={customDayRenderer} /> </LocalizationProvider> );