Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show empty date picker in Material UI- REACT?

CURRENT IMPLEMENTATION

<MuiPickersUtilsProvider utils={DateFnsUtils}>
     <DatePicker
      fullWidth
      value={dob}
      label="Date of Birth"
      format="dd / MM / yyyy"
      margin="normal"
      maxDate={new Date()}
      InputProps={{ className: css.datepicker }}
      ></DatePicker>
</MuiPickersUtilsProvider>

CSS Code

.datepicker {
  margin: 2px 0px 2px 0px;
  height: 60px;
  width: fit-content;
  padding: 20px 15px 10px;
  border-bottom: 2px solid $lightGrey;
  background-color: #fff;
  color: #2c2c2c;
  width: 300px;
  font-weight: 600;
}

Current Behaviour when empty

Current Implementation

Expected Behaviour when empty

Expected Behaviour

Is it possible to style the Material UI date picker in my expected way of look as the image attached?

like image 393
Harsh Nagalla Avatar asked Jul 19 '20 14:07

Harsh Nagalla


People also ask

How do you make a Datepicker blank?

You just need to set property valueDefault={null} and the DatePicker will be blank.

How do you clear the UI Datepicker?

You can set the value property as null and it will clear it.

How do I use material UI date picker?

Date pickers use a dialog window or an inline popover to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.

How to use material UI Pickers with react datepicker?

After creating the React application, install the Material UI package by executing the below NPM command For using the Datepicker component, we also need to install the Material UI Pickers package Install the date-io package to perform various basic date operations Note: For material-ui-pickers v3 use v1.x version of @date-io adapters.

How do I use material UI components in react?

Using Datepicker Material UI Components There are a number of UI components provided by Material UI package modules. To use a component we first import it in the React Component. It can be a functional or class component.

How to change the style of the materialui datepicker?

Also, we need to import the DateFnsUtils used by MuiPickersUtilsProvider component as a utility method provider. Run the application by hitting $ npm start to see a default MaterialUI Datepicker. By default, it creates a popover varient type The variant property is used to change the style of the Datepicker.

Can react-date-picker take the default value as moment object?

defaultValue property of react-date-picker was not taking the value as an moment object rather it worked when passed as string only. Show activity on this post. Thanks for contributing an answer to Stack Overflow!


1 Answers

  • Just provide the initial value of date as null (in your state) then it will work the way you expected.
  • Also you can use emptyLabel prop to provide custom placeholder when date is null

see demo in codesandbox here

code

function App() {
  const [dob, setDob] = useState(null); //<--- pass initial value as null
  const handleDateChange = date => {
    setDob(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        fullWidth
        onChange={handleDateChange}
        value={dob}
        label="Date of Birth"
        format="dd / MM / yyyy"
        margin="normal"
        maxDate={new Date()}
        emptyLabel="custom label" //<--- custom placeholder when date is null
        //  InputProps={{ className: css.datepicker }}
      />
    </MuiPickersUtilsProvider>
  );
}

Edit: answering follow-up qns based on comment.

  1. Remove the floating label when date is null - provide value to label when dob has a value
label={dob && "Date of Birth"}
  1. Apply styles for Empty label - Use makeStyles and InputProps
const useStyles = makeStyles(theme => ({
  datepicker: {
    margin: "2px 0px 2px 0px",
    height: "60px",
    // width: 'fit-content',
    padding: "20px 15px 10px",
    borderBottom: "2px solid blue",
    backgroundColor: "#fff",
    color: "#2c2c2c",
    width: 300,
    fontWeight: 600
  }
}));

function App() {
  const [dob, setDob] = useState(null); //<--- pass initial value as null
  const classes = useStyles();
  const handleDateChange = date => {
    setDob(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        fullWidth
        onChange={handleDateChange}
        value={dob}
        label={dob && "Date of Birth"}
        format="dd / MM / yyyy"
        margin="normal"
        maxDate={new Date()}
        emptyLabel="custom label" //<--- custom placeholder when date is null
        InputProps={{ className: !dob ? classes.datepicker : null }} //<----apply style when no date selected
      />
    </MuiPickersUtilsProvider>
  );
}

The codesandbox demo has been updated to reflect all the points above.

like image 53
gdh Avatar answered Sep 17 '22 22:09

gdh