Material UI change date field style in dialog

user_16915775 0
Viewed 391

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;
material-ui reactjs datepicker javascript
1 Answers

First off, 3rd party libraries usually not that flexible as you want them to be. If it is styling only, it can be overwritten with your css using their class names and styled accordingly. Sadly when it comes to functionality, whatever they expose, you can use it. On rare cases, they allow to prototype their components with extended functionality, but this is not the case right here.

I'd suggest using https://material-ui-pickers.dev/ as material-ui even suggests it, because of extended functionality.

Then look at their API and what it can do https://material-ui-pickers.dev/api/DatePicker

The only possible solution for you, is creating your own date picker.

user_42051920
Related