Estoy tratando de limitar al usuario para que pueda elegir entre un rango muy pequeño de fechas usando el selector de día de reacción. Todas las demás fechas anteriores y posteriores deben desactivarse para evitar que se seleccionen. A continuación se muestra mi componente DateRange con accesorios que pasa los valores como cadenas como 2022-07-15. El método que intenté se tomó de algunas preguntas anteriores aquí, ¿quizás lo estoy implementando mal?
const DateRange = (props) => { return ( <DayPicker mode="single" disabledDays={{ before: new Date(props.startdate), after: new Date(props.enddate) }} /> );};
Sin embargo, ninguna fecha se desactiva visualmente (atenuada) y el usuario aún puede seleccionar cualquier fecha. ¡Cualquier ayuda sobre cómo corregir esto sería muy apreciada!
Hice una caja de arena , ¿es esto lo que esperas?
export default function App() { function _DayPicker({ before, after }) { const afterMatcher: DateAfter = { after }; const beforeMatcher: DateBefore = { before }; const disabledDays = [afterMatcher, beforeMatcher]; return ( <DayPicker defaultMonth={new Date(2022, 5, 10)} disabled={disabledDays} mode="single" /> ); } return ( <_DayPicker before={new Date(2022, 5, 10)} after={new Date(2022, 5, 28)} /> ); }