Fixed react warning: switching input element from uncontrolled to controlled.

Making display of date dependent on "value" prop causes react to display a warning and also causes quirky display when clearing the field.

Author: callmiy

demo/src/Demo.js

@@ -25,17 +25,17 @@ export default class Demo extends React.Component {
     const randomMilliseconds = getRandomValue(0, Date.now())
     this.setState({ selectedDate: moment(randomMilliseconds) })
   }
-  
+
   render() {
     return (
       <div>
         <div className="random-container">
-          <RaisedButton primary 
+          <RaisedButton primary
             label="Set random"
-            onClick={this.setRandomValue} 
+            onClick={this.setRandomValue}
           />
         </div>
- 
+
         <DateTimePicker
           ref="picker"
           className="datepicker"
@@ -45,7 +45,6 @@ export default class Demo extends React.Component {
           floatingLabelText="Get my date"
           format={this.state.format}
           timePickerDelay={this.state.delay}
-          value={this.state.selectedDate}
           onChange={selectedDate => this.setState({ selectedDate })}
         />
 

src/DateTimePicker.jsx

@@ -51,7 +51,7 @@ export default class DateTimePicker extends Component {
     hideCalendarDate: PropTypes.bool,
     firstDayOfWeek: PropTypes.number,
     onDatePickerDismiss: PropTypes.func,
-    value: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
+    customValue: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
     maxDate: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
     minDate: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
 
@@ -66,7 +66,7 @@ export default class DateTimePicker extends Component {
   }
 
   static defaultProps = {
-    value: undefined,
+    customValue: undefined,
     okLabel: 'OK',
     minDate: undefined,
     maxDate: undefined,
@@ -113,16 +113,16 @@ export default class DateTimePicker extends Component {
   }
 
   // eslint-disable-next-line
-  getInitialTime = () => this.props.value
-    ? moment(this.props.value)
+  getInitialTime = () => this.props.customValue
+    ? moment(this.props.customValue)
     : null
 
   state = {
     dateTime: this.getInitialTime(),
   }
 
   componentDidUpdate = (prevProps) => {
-    if (prevProps.value !== this.props.value) {
+    if (prevProps.customValue !== this.props.customValue) {
       this.setState({ dateTime: this.getInitialTime() });
     }
   }
@@ -221,8 +221,7 @@ export default class DateTimePicker extends Component {
       onDateSelected,
       onTimeSelected,
       disabled,
-      placeholder,
-      value,
+      customValue,
       ...other
     } = this.props;
 
@@ -232,21 +231,21 @@ export default class DateTimePicker extends Component {
           onFocus={this.handleFocus}
           className={textFieldClassName}
           onClick={this.openDatePicker}
-          value={value ? this.getDisplayTime() : placeholder}
+          value={this.getDisplayTime()}
           style={{ ...styles.textField, ...textFieldStyle }}
           disabled={disabled}
           {...other}
         />
 
         {
           clearIcon
-          ? <IconButton
+            ? <IconButton
               onClick={this.clearState}
               style={{ ...styles.clearIcon, ...clearIconStyle }}
               disabled={disabled}>
               { clearIcon }
             </IconButton>
-          : null
+            : null
         }
 
         <DatePicker