[DatePicker] Setting to a default state as a controlled component

[ztittle]

Problem description

React does not allow setting null as value on an input field to clear the input value. For controlled components, the value should be set as an empty string. However, DatePicker does not allow value to be set to a string and instead expects an Date object.

Steps to reproduce

Setup DatePicker as a controlled component and set a value's default to an empty string.

export default class DatePickerExampleControlled extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      controlledDate: null,
    };
  }

  handleChange = (event, date) => {
    this.setState({
      controlledDate: date,
    });
  };

  render() {
    return (
      <DatePicker
        hintText="Controlled Date Input"
        value={this.state.controlledDate}
        onChange={this.handleChange}
      />
    );
  }
}

Versions

• Material-UI: 0.15.2
• React: 15.2.0
• Browser: Chrome

https://facebook.github.io/react/blog/2016/04/07/react-v15.html

Future versions of React will treat as a request to clear the input. However, React 0.14 has been ignoring value={null}. React 15 warns you on a null input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass undefined to make the input uncontrolled.
@antoaravinth in #5048

[JosephGarrone]

I am also having this issue and would love to see this implemented.

A workaround would be great if anyone has found one.

I think modifying this line to:

getControlledDate(props = this.props) {
  if (props.value instanceof Date) {
    return props.value;
  } elseif (props.value == null || props.value == undefined) { // IDK if these are the ideal checks
    return props.defaultDate;
  }
}

would probably resolve this? Would ensure that when the value is reset it will default back to the original default date. Additionally, the developer still has control over the reset value (As opposed to returning PropTypes.object).

[rahulkris123]

For the controlled date component, if the date value is null at the start use empty object {} instead of string to avoid react and material UI warning/error

[oliviertassinari]

Closing for #4787