Change default date of DateRangePicker Reactjs MUI

January 7, 2022

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

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>

>Solution :

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.