I'm using Material-UI in my React project, and using its date picker component to render date items. but the default style is not suitable for my need, i want to use selector as a date displayment in date picker dialog, replacing its text field. After viewing Material-UI's date picker related API, I cannot find suitable ways. Can any help? that will be very helpfull.

Following picture is the date picker style I want to render:

wanted style

Following picture is its default style, the default is text:

default style

the code as following:

import { useState } from "react";
import { makeStyles } from "@material-ui/styles";
import { MuiPickersUtilsProvider, KeyboardDatePicker } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";

const useStyle = makeStyles({
  root: {
    marginBottom: "3rem",
  },
});

const CustomizeDatePicker = () => {
  const classes = useStyle();
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <div className={classes.root}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          autoOk
          label="end date"
          format="yyyy-MM-dd"
          views={["year", "month", "date"]}
          openTo="date"
          value={selectedDate}
          onChange={setSelectedDate}
        />
      </MuiPickersUtilsProvider>
    </div>
  );
};

export default CustomizeDatePicker;