Tengo 2 selectores de fecha en material UI-
From Date - <KeyboardDatePicker value={initialDateFrom} disableFuture={true} onChange={handleFromDateChange} > </KeyboardDatePicker> To Date - <KeyboardDatePicker value={initialDateTo} disableFuture={true} onChange={handleToDateChange} > </KeyboardDatePicker> const [initialDateFrom , setInitialDateFrom]= useState<any>(null); const [initialDateTo , setInitialDateTo]= useState<any>(null); const handleFromDateChange =(event:any , value :any)=>{ setInitialDateFrom(value) } const handleToDateChange =(event:any , value :any)=>{ setInitialDateTo(value) }Lo que estoy tratando de lograr -
Si selecciono 11 de octubre de 2021 como Desde la fecha, quiero deshabilitar todas las fechas anteriores en el selector de fechas Hasta el 11 de octubre de 2021. Hasta la fecha: el selector de fecha debe mostrar solo fechas futuras a partir del 11 de octubre de 2021.
Lo que probé -
minDate = {initialDateFrom} en el selector de fechas hasta la To Date
value.minDate = initialDateFrom en handleFromDateChange
Pero esto no ayudó.
Puede probar este enfoque, he creado un estado más para manejar minDate
const [initialDateFrom , setInitialDateFrom]= useState<any>(null); const [minDate, setMinDate] = useState<any>(null); const [initialDateTo , setInitialDateTo]= useState<any>(new Date()); const handleFromDateChange =(event:any , value :any)=>{ setInitialDateFrom(new Date(value)); setMinDate(new Date(value)) } const handleToDateChange =(event:any , value :any)=>{ setInitialDateTo(value) } <KeyboardDatePicker value={initialDateFrom} disableFuture={true} onChange={handleFromDateChange} > </KeyboardDatePicker> <KeyboardDatePicker value={initialDateTo} minDate={minDate} onChange={handleToDateChange} > </KeyboardDatePicker>