reactjs - 如何将此 DataPicker 转换为 Material UI 的 DataRangePicker？

Question

我尝试了一些导入，但不知道如何实现

<form className={classes.formContainer} noValidate autoComplete="off">
  <div className={classes.formContent}>
    <div className={classes.fieldsContent}>
      <TextField
        id="search-name-enrollment"
        placeholder="Buscar por nome ou número de matrícula"
        className={clsx(classes.field, classes.fieldNameEnroll)}
        value={nameEnrollment}
        onChange={(event) => handleNameEnrollmentChange(event.target.value)}
        InputProps={{
          disableUnderline: true,
          classes: { input: classes.placeholder },
          startAdornment: (
            <InputAdornment position="start">
              <SearchIcon color="primary" />
            </InputAdornment>
          )
        }}
      />
    </div>

    <Link
      component="button"
      type="button"
      variant="body2"
      color="primary"
      underline="none"
      className={classes.linkFiltros}
      onClick={() => {
        setOpenFilters(!openFilters)
      }}
    >
      Mais filtros
      {openFilters ? (
        <KeyboardArrowUpIcon fontSize="small" />
      ) : (
        <KeyboardArrowDownIcon fontSize="small" />
      )}
    </Link>
    <Collapse
      in={openFilters}
      classes={{
        wrapper: classes.wrapper
      }}
      className={classes.fieldsContent}
      timeout="auto"
      unmountOnExit
    >
      <div className={classes.secundaryFieldContent}>
        <div className={classes.secundaryField}>
          <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <KeyboardDatePicker
              disableToolbar
              variant="inline"
              format="dd/MM/yyyy"
              margin="normal"
              id="date-picker-inline"
              placeholder="Data de matrícula"
              value={dateEnrollment}
              onChange={handleDateEnrollmentChange}
              className={clsx(classes.field, classes.dates)}
              invalidDateMessage=""
              InputProps={{
                disableUnderline: true,
                classes: { input: classes.placeholder }
              }}
              KeyboardButtonProps={{
                'aria-label': 'change date'
              }}
            />
          </MuiPickersUtilsProvider>
        </div>
        <div
          className={clsx(
            classes.secundaryField,
            classes.secundaryFieldMarginL
          )}
        >
          <Autocomplete
            multiple
            limitTags={1}
            id="checkboxes-tags-demo"
            options={options}
            disableCloseOnSelect
            value={status}
            onChange={handleStatusChange}
            getOptionLabel={(option) => option.label}
            renderOption={(option, { selected }) => (
              <React.Fragment>
                <Checkbox
                  icon={icon}
                  checkedIcon={checkedIcon}
                  style={{ marginRight: 8 }}
                  checked={selected}
                />
                {option.label}
              </React.Fragment>
            )}
            renderInput={(params) => (
              <TextField
                {...params}
                className={clsx(classes.field, classes.status)}
                placeholder="Status de matrícula"
                classes={{ root: classes.underline }}
              />
            )}
          />
        </div>
      </div>
    </Collapse>
  </div>
</form>

我想知道如何转换为DataRangePicker，你们可以帮助我吗？我已经尝试了一些导入和类似的导入，但根本不知道如何实现它。我已经开发的这个模型只是一个日期，我想要一个日历，我也可以选择一个范围。

标签： reactjsnext.js