Quiero deshabilitar las fechas futuras del selector de fechas MUI (solo las fechas seleccionadas, no todas las fechas futuras)
Obtengo una serie de fechas de la API que deben deshabilitarse del selector de fechas.
Supongamos que debajo de blackoutDates son lo que obtengo de la API. Entonces, ¿cómo deshabilitar esas fechas?
A continuación se muestra mi código
const getDisabledDates = () => { let blackoutDates = {[ "2022-03-01", "2022-03-08" "2022-04-13", "2022-05-22" ]} } <DatePicker disablePast value={checkout.rideDate} shouldDisableDate={getDisabledDates} onChange={(newValue) => { dispatch(setRideDate(newValue?.toISOString().split('T')[0])) }} renderInput={(params) => <TextField className={classes.datePickerStyle} {...params}/>} />shouldDisableDate es una función con la fecha actual en param. Entonces necesita comparar esto con su matriz, para habilitar / deshabilitar la fecha
const shouldDisableDate= date => { let blackoutDates = {[ "2022-03-01", "2022-03-08" "2022-04-13", "2022-05-22" ]} return blackoutDates.includes(date); } Este es un ejemplo, ya que su date es de tipo Date mientras que su matriz contiene cadenas. Por lo tanto, primero deberá convertir la date en una cadena YYYY-MM-DD , usando su forma preferida :)
El controlador prop shouldDisableDate pasa un argumento de fecha a la función que proporciona. Entonces, su función podría verse así:
const getDisabledDates = (date) => { let blackoutDates = [ "2022-03-01", "2022-03-08" "2022-04-13", "2022-05-22" ]; // check `date` object against blackoutDates. // return true | false } Tenga en cuenta que el parámetro de fecha es un objeto de fecha estándar. Más información en la documentación de MUI . En el ejemplo, puede ver cómo se pasa una función isWeekend a una prop shouldDisableDate . De acuerdo con la documentación de date-fns , esta función acepta el objeto de fecha. Le sugiero que juegue con la demostración que proporciona MUI.