0
225
Views¿Cómo puedo agregar rangos preestablecidos en el selector de rango de fechas de MUI 5?
Estoy usando el selector de rango de fechas MUI 5, mi tarea es agregar rangos preestablecidos en el lugar del pie de página en el selector de rango de fechas si podemos hacerlo de alguna manera, así que necesito agregar eso en mi selector de fechas MUI si hago clic en que cualquier rango de fecha del selector de fecha cambiará en consecuencia cuando seleccionemos ahora mismo. No tengo idea de cómo puedo agregar cierto rango en el selector de fecha MUI
ranges={{ Yesterday: [ moment().subtract(1, "day").startOf("day"), moment().endOf("day"), ], Today: [ moment().startOf("day"), moment().add(1, "day").endOf("day"), ], "Last Week": [ moment().subtract(1, "week").startOf("isoWeek"), moment().subtract(1, "week").endOf("isoWeek"), ], "Last Month": [ moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month"), ], "This Month": [ moment().startOf("month"), moment().endOf("month"), ], "Last Year": [ moment().subtract(1, "year").startOf("year"), moment().subtract(1, "year").endOf("year"), ], "This Year": [ moment().startOf("year"), moment().endOf("year"), ], }} export default function BasicDateRangePicker() { const [value, setValue] = React.useState([null, null]); return ( <LocalizationProvider dateAdapter={AdapterDateFns}> <DateRangePicker startText="Check-in" endText="Check-out" value={value} onChange={(newValue) => { setValue(newValue); }} renderInput={(startProps, endProps) => ( <React.Fragment> <TextField {...startProps} /> <Box sx={{ mx: 2 }}> to </Box> <TextField {...endProps} /> </React.Fragment> )} /> </LocalizationProvider> ); }así, si podemos agregar
·
Juan Pablo Isaza
2 answers
Answer question0
Simplemente use los components prop de DateRangePicker y agregue botones en el contenedor de acciones.
export function App() { const [value, setValue] = React.useState<DateRange<Date>>([null, null]); const handleClickOnToday = () => { setValue([ moment().startOf("day").toDate(), moment().add(1, "day").endOf("day").toDate() ]); }; const handleClickOnYesterday = () => { setValue([ moment().subtract(1, "day").startOf("day").toDate(), moment().endOf("day").toDate() ]); }; const handleClickOnLastWeek = () => { setValue([ moment().subtract(1, "week").startOf("isoWeek").toDate(), moment().subtract(1, "week").endOf("isoWeek").toDate() ]); }; return ( <LocalizationProvider dateAdapter={AdapterDateFns}> <DateRangePicker startText="Check-in" endText="Check-out" value={value} onChange={(newValue) => { setValue(newValue); }} components={{ ActionBar: () => ( <Stack spacing={2} p={1} direction="row"> <Button onClick={handleClickOnToday} variant="outlined"> Today </Button> <Button onClick={handleClickOnYesterday} variant="outlined"> Yesterday </Button> <Button onClick={handleClickOnLastWeek} variant="outlined"> Last Week </Button> </Stack> ) }} renderInput={(startProps, endProps) => ( <React.Fragment> <TextField {...startProps} /> <Box sx={{ mx: 2 }}> to </Box> <TextField {...endProps} /> </React.Fragment> )} /> </LocalizationProvider> ); }Aquí está la muestra Codesandbox .
Agregue otros botones como desee.
·
Juan Pablo Isaza
Report
0
Al copiar la respuesta anterior, acabo de hacer una mejora: crea todos los botones y establece las selecciones en el valor correspondiente dentro de la matriz de ranges :
interface IRangeProps { [key: string]: any; } const ranges: IRangeProps = { Yesterday: [ moment().subtract(1, "day").startOf("day"), moment().endOf("day") ], Today: [moment().startOf("day"), moment().add(1, "day").endOf("day")], "Last Week": [ moment().subtract(1, "week").startOf("isoWeek"), moment().subtract(1, "week").endOf("isoWeek") ], "Last Month": [ moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month") ], "This Month": [moment().startOf("month"), moment().endOf("month")], "Last Year": [ moment().subtract(1, "year").startOf("year"), moment().subtract(1, "year").endOf("year") ], "This Year": [moment().startOf("year"), moment().endOf("year")] }; export function App() { const [value, setValue] = React.useState<DateRange<Date>>([null, null]); const handleRangeclick = (rangeValue: DateRange<Date>) => { setValue(rangeValue); }; return ( <LocalizationProvider dateAdapter={AdapterDateFns}> <DateRangePicker startText="Check-in" endText="Check-out" value={value} onChange={(newValue) => { setValue(newValue); }} components={{ ActionBar: () => ( <Stack spacing={2} p={1} direction="row"> {Object.keys(ranges).map((key) => { return ( <Button key={key} onClick={() => handleRangeclick(ranges[key])} variant="outlined" > {key} </Button> ); })} </Stack> ) }} renderInput={(startProps, endProps) => ( <React.Fragment> <TextField {...startProps} /> <Box sx={{ mx: 2 }}> to </Box> <TextField {...endProps} /> </React.Fragment> )} /> </LocalizationProvider> ); } export default App;Si eso es lo que quieres, creo que la respuesta de @Adel Armand debe aceptarse como la correcta, hizo un gran trabajo y solo quería mostrar una forma más automática.
·
Juan Pablo Isaza
Report
Answer question