MUI X
Contents
The Date Time Range Field let the user select a date and time range with the keyboard.
—
<LocalizationProvider dateAdapter={AdapterDayjs}> <Stack spacing={4}> <MultiInputDateTimeRangeField /> </Stack> </LocalizationProvider>
The component can be uncontrolled or controlled
Uncontrolled field
Controlled field
<LocalizationProvider dateAdapter={AdapterDayjs}> <Grid container spacing={4} width={550}> <GridItem label="Uncontrolled field"> <MultiInputDateTimeRangeField defaultValue={[dayjs('2022-04-07T15:30'), dayjs('2022-04-13T18:30')]} /> </GridItem> <GridItem label="Controlled field"> <MultiInputDateTimeRangeField value={value} onChange={(newValue) => setValue(newValue)} /> </GridItem> </Grid> </LocalizationProvider>