Search code examples
reactjsmaterial-uireact-daterange-picker

Change default date of DateRangePicker Reactjs MUI


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>

Date range picker


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.