Skip to content

Commit 91dad46

Browse files
committed
Move to controlled state
1 parent 18aa915 commit 91dad46

File tree

3 files changed

+38
-13
lines changed

3 files changed

+38
-13
lines changed

demo/src/Demo.js

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@ import React from 'react'
33
import DateTimePicker from 'material-ui-datetimepicker';
44
import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog'
55
import TimePickerDialog from 'material-ui/TimePicker/TimePickerDialog';
6-
import { Card, CardHeader, CardText, TextField } from 'material-ui';
6+
import { RaisedButton, Card, CardHeader, CardText, TextField } from 'material-ui';
77

88
import './index.css'
99

10+
const getRandomValue = (min, max) => {
11+
return Math.floor(Math.random() * (max - min)) + min;
12+
}
13+
1014
export default class Demo extends React.Component {
1115
state = {
1216
selectedDate: null
@@ -16,9 +20,21 @@ export default class Demo extends React.Component {
1620
this.setState({ [key]: value }, () => this.refs.picker.forceUpdate())
1721
}
1822

23+
setRandomValue = () => {
24+
const randomMilliseconds = getRandomValue(0, Date.now())
25+
this.setState({ selectedDate: randomMilliseconds })
26+
}
27+
1928
render() {
2029
return (
2130
<div>
31+
<div className="random-container">
32+
<RaisedButton primary
33+
label="Set random"
34+
onClick={this.setRandomValue}
35+
/>
36+
</div>
37+
2238
<DateTimePicker
2339
ref="picker"
2440
className="datepicker"
@@ -27,7 +43,7 @@ export default class Demo extends React.Component {
2743
floatingLabelText="Get my date"
2844
format={this.state.format}
2945
timePickerDelay={this.state.delay}
30-
defaultTime={this.state.defaultTime}
46+
value={this.state.selectedDate}
3147
onChange={selectedDate => this.setState({ selectedDate })}
3248
/>
3349

demo/src/index.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ body {
1313
font-family: 'Open Sans', sans-serif;
1414
}
1515

16+
.random-container {
17+
display: flex;
18+
justify-content: center;
19+
}
20+
1621
.datepicker {
1722
display: flex;
1823
justify-content: center;

src/DateTimePicker.jsx

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export default class DateTimePicker extends Component {
2121
format: PropTypes.string,
2222
timePickerDelay: PropTypes.number,
2323
okLabel: PropTypes.string,
24-
defaultTime: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
2524
name: PropTypes.string,
2625
showCurrentDateByDefault: PropTypes.bool,
2726
returnMomentDate: PropTypes.bool,
@@ -48,8 +47,9 @@ export default class DateTimePicker extends Component {
4847
hideCalendarDate: PropTypes.bool,
4948
firstDayOfWeek: PropTypes.number,
5049
onDatePickerDismiss: PropTypes.func,
51-
maxDate: PropTypes.oneOf([PropTypes.object, PropTypes.string, PropTypes.number]),
52-
minDate: PropTypes.oneOf([PropTypes.object, PropTypes.string, PropTypes.number]),
50+
value: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
51+
maxDate: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
52+
minDate: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
5353

5454
// TimePicker
5555
onTimeSelected: PropTypes.func,
@@ -62,6 +62,7 @@ export default class DateTimePicker extends Component {
6262
}
6363

6464
static defaultProps = {
65+
value: new Date(),
6566
okLabel: 'OK',
6667
minDate: undefined,
6768
maxDate: undefined,
@@ -70,7 +71,6 @@ export default class DateTimePicker extends Component {
7071
timePickerDelay: 150,
7172
className: 'datetime-container',
7273
textFieldClassName: 'datetime-input',
73-
defaultTime: null,
7474
autoOkDatePicker: true,
7575
datePickerMode: 'portrait',
7676
openToYearSelection: false,
@@ -104,14 +104,17 @@ export default class DateTimePicker extends Component {
104104
onDatePickerDismiss: () => { },
105105
}
106106

107-
constructor(props) {
108-
super(props);
107+
getInitialTime = () => (this.props.value ? moment(this.props.value) : null)
109108

110-
this.state = {
111-
dateTime: props.defaultTime ? moment(this.props.defaultTime) : null,
112-
};
109+
state = {
110+
dateTime: this.getInitialTime(),
113111
}
114112

113+
componentDidUpdate = (prevProps) => {
114+
if (prevProps.value !== this.props.value) {
115+
this.setState({ dateTime: this.getInitialTime() });
116+
}
117+
}
115118

116119
/*
117120
* Get current selected date by user
@@ -205,6 +208,7 @@ export default class DateTimePicker extends Component {
205208
onDateSelected,
206209
onTimeSelected,
207210
disabled,
211+
value,
208212
...other
209213
} = this.props;
210214

@@ -230,7 +234,7 @@ export default class DateTimePicker extends Component {
230234

231235
<DatePicker
232236
ref={(node) => { this.datePicker = node; }}
233-
initialDate={this.getDateOrCurrentTime()}
237+
value={this.getDateOrCurrentTime()}
234238
maxDate={this.getDateOrNull(maxDate)}
235239
minDate={this.getDateOrNull(minDate)}
236240
okLabel={okLabel}
@@ -248,7 +252,7 @@ export default class DateTimePicker extends Component {
248252

249253
<TimePicker
250254
ref={(node) => { this.timePicker = node; }}
251-
initialTime={this.getDateOrCurrentTime()}
255+
value={this.getDateOrCurrentTime()}
252256
onAccept={this.selectTime}
253257
bodyStyle={timePickerBodyStyle}
254258
onShow={onTimePickerShow}

0 commit comments

Comments
 (0)