Move to controlled state

Author: dmtrKovalenko

demo/src/Demo.js

@@ -3,10 +3,14 @@ import React from 'react'
 import DateTimePicker from 'material-ui-datetimepicker';
 import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog'
 import TimePickerDialog from 'material-ui/TimePicker/TimePickerDialog';
-import { Card, CardHeader, CardText, TextField } from 'material-ui';
+import { RaisedButton, Card, CardHeader, CardText, TextField } from 'material-ui';
 
 import './index.css'
 
+const getRandomValue = (min, max) => {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
 export default class Demo extends React.Component {
   state = {
     selectedDate: null
@@ -16,9 +20,21 @@ export default class Demo extends React.Component {
     this.setState({ [key]: value }, () => this.refs.picker.forceUpdate())
   }
 
+  setRandomValue = () => {
+    const randomMilliseconds = getRandomValue(0, Date.now())
+    this.setState({ selectedDate: randomMilliseconds })
+  }
+  
   render() {
     return (
       <div>
+        <div className="random-container">
+          <RaisedButton primary 
+            label="Set random"
+            onClick={this.setRandomValue} 
+          />
+        </div>
+ 
         <DateTimePicker
           ref="picker"
           className="datepicker"
@@ -27,7 +43,7 @@ export default class Demo extends React.Component {
           floatingLabelText="Get my date"
           format={this.state.format}
           timePickerDelay={this.state.delay}
-          defaultTime={this.state.defaultTime}
+          value={this.state.selectedDate}
           onChange={selectedDate => this.setState({ selectedDate })}
         />
 

demo/src/index.css

@@ -13,6 +13,11 @@ body {
   font-family: 'Open Sans', sans-serif;
 }
 
+.random-container {
+  display: flex;
+  justify-content: center;
+}
+
 .datepicker {
   display: flex;
   justify-content: center;

src/DateTimePicker.jsx

@@ -21,7 +21,6 @@ export default class DateTimePicker extends Component {
     format: PropTypes.string,
     timePickerDelay: PropTypes.number,
     okLabel: PropTypes.string,
-    defaultTime: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
     name: PropTypes.string,
     showCurrentDateByDefault: PropTypes.bool,
     returnMomentDate: PropTypes.bool,
@@ -48,8 +47,9 @@ export default class DateTimePicker extends Component {
     hideCalendarDate: PropTypes.bool,
     firstDayOfWeek: PropTypes.number,
     onDatePickerDismiss: PropTypes.func,
-    maxDate: PropTypes.oneOf([PropTypes.object, PropTypes.string, PropTypes.number]),
-    minDate: PropTypes.oneOf([PropTypes.object, PropTypes.string, PropTypes.number]),
+    value: 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]),
 
     // TimePicker
     onTimeSelected: PropTypes.func,
@@ -62,6 +62,7 @@ export default class DateTimePicker extends Component {
   }
 
   static defaultProps = {
+    value: new Date(),
     okLabel: 'OK',
     minDate: undefined,
     maxDate: undefined,
@@ -70,7 +71,6 @@ export default class DateTimePicker extends Component {
     timePickerDelay: 150,
     className: 'datetime-container',
     textFieldClassName: 'datetime-input',
-    defaultTime: null,
     autoOkDatePicker: true,
     datePickerMode: 'portrait',
     openToYearSelection: false,
@@ -104,14 +104,17 @@ export default class DateTimePicker extends Component {
     onDatePickerDismiss: () => { },
   }
 
-  constructor(props) {
-    super(props);
+  getInitialTime = () => (this.props.value ? moment(this.props.value) : null)
 
-    this.state = {
-      dateTime: props.defaultTime ? moment(this.props.defaultTime) : null,
-    };
+  state = {
+    dateTime: this.getInitialTime(),
   }
 
+  componentDidUpdate = (prevProps) => {
+    if (prevProps.value !== this.props.value) {
+      this.setState({ dateTime: this.getInitialTime() });
+    }
+  }
 
   /*
     * Get current selected date by user
@@ -205,6 +208,7 @@ export default class DateTimePicker extends Component {
       onDateSelected,
       onTimeSelected,
       disabled,
+      value,
       ...other
     } = this.props;
 
@@ -230,7 +234,7 @@ export default class DateTimePicker extends Component {
 
         <DatePicker
           ref={(node) => { this.datePicker = node; }}
-          initialDate={this.getDateOrCurrentTime()}
+          value={this.getDateOrCurrentTime()}
           maxDate={this.getDateOrNull(maxDate)}
           minDate={this.getDateOrNull(minDate)}
           okLabel={okLabel}
@@ -248,7 +252,7 @@ export default class DateTimePicker extends Component {
 
         <TimePicker
           ref={(node) => { this.timePicker = node; }}
-          initialTime={this.getDateOrCurrentTime()}
+          value={this.getDateOrCurrentTime()}
           onAccept={this.selectTime}
           bodyStyle={timePickerBodyStyle}
           onShow={onTimePickerShow}