Change default date of DateRangePicker Reactjs MUI

Question

DateRangePicker is showing todays date by dafault. is it possible to set specific date as default date.

0

Input textfields height is not changing with in-line css.

 <FormControl>
    <LocalizationProvider
      dateAdapter={AdapterDateFns}
      sx={{
        BackgroundColor: "red",
      }}
    >
      <DateRangePicker
        startText="Start date"
        endText="End date"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(startProps, endProps) => (
          <React.Fragment>
            <TextField
              {...startProps}
              
            />
            <Box sx={{ mx: 2 }}> to </Box>
            <TextField {...endProps}  />
          </React.Fragment>
        )}
      />
    </LocalizationProvider>
  </FormControl>

score 0 · Accepted Answer · answered Jan 07 '22 at 08:34

0

The DateRangePicker component is actually highlighting the today's date with a border to indicate what's todays date. It will highlight the selected value passed in the value prop with a primary color as background-color property from the theme.

In this codesandbox, you can see I set the state with previous date which is being highlighted.

answered Jan 07 '22 at 08:34

Karun

188
2
11

value prop is accepting the array of dates which is displaying as a selected range. – Code cracker Jan 07 '22 at 08:36
Yes indeed `value` accepts the array with Dates as a range since this is a range date picker. you can send array with one date value to select that value in the range picker. if you want to show the range send the array with two values. If you are storing those in different varibles, maybe it will help if you pass that in this format in above code. `value={[value]}` – Karun Jan 07 '22 at 08:40

Change default date of DateRangePicker Reactjs MUI

1 Answers1