diff --git a/src/time-picker/clock.jsx b/src/time-picker/clock.jsx
index 42a69838ac759d..a6979a5396ef41 100644
--- a/src/time-picker/clock.jsx
+++ b/src/time-picker/clock.jsx
@@ -80,8 +80,8 @@ const Clock = React.createClass({
if (this.props.format === 'ampm'){
buttons = [
- {"AM"},
- {"PM"},
+ {"AM"},
+ {"PM"},
];
}
return buttons;
diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx
index a8fab683100d21..ed8618173b51d7 100644
--- a/src/time-picker/time-picker.jsx
+++ b/src/time-picker/time-picker.jsx
@@ -3,6 +3,7 @@ const StylePropable = require('../mixins/style-propable');
const WindowListenable = require('../mixins/window-listenable');
const TimePickerDialog = require('./time-picker-dialog');
const TextField = require('../text-field');
+const DateTime = require('../utils/date-time');
let emptyTime = new Date();
@@ -48,11 +49,22 @@ const TimePicker = React.createClass({
getInitialState() {
return {
- time: this.props.defaultTime || emptyTime,
+ time: this._isControlled() ? this._getControlledTime() : (this.props.defaultTime || emptyTime),
dialogTime: new Date(),
};
},
+ componentWillReceiveProps(nextProps) {
+ if (this._isControlled()) {
+ let newTime = this._getControlledTime(nextProps);
+ if (!DateTime.isEqualTime(this.state.time, newTime)) {
+ this.setState({
+ time: newTime,
+ });
+ }
+ }
+ },
+
formatTime(date) {
let hours = date.getHours();
let mins = date.getMinutes().toString();
@@ -93,6 +105,7 @@ const TimePicker = React.createClass({
onDismiss,
style,
textFieldStyle,
+ valueLink,
...other,
} = this.props;
@@ -108,6 +121,7 @@ const TimePicker = React.createClass({
{...other}
style={textFieldStyle}
ref="input"
+ value={this.state.time ? this.formatTime(this.state.time) : undefined}
defaultValue={defaultInputValue}
onFocus={this._handleInputFocus}
onTouchTap={this._handleInputTouchTap} />
@@ -128,10 +142,12 @@ const TimePicker = React.createClass({
},
setTime(t) {
+ if (process.env.NODE_ENV !== 'production' && this._isControlled()) {
+ console.error('Cannot call TimePicker.setTime when value or valueLink is defined as a property.');
+ }
this.setState({
time: t,
});
- this.refs.input.setValue(this.formatTime(t));
},
/**
@@ -150,8 +166,11 @@ const TimePicker = React.createClass({
},
_handleDialogAccept(t) {
- this.setTime(t);
+ if (!this._isControlled()) {
+ this.setTime(t)
+ }
if (this.props.onChange) this.props.onChange(null, t);
+ if (this.props.valueLink) this.props.valueLink.requestChange(t);
},
_handleInputFocus(e) {
@@ -166,6 +185,19 @@ const TimePicker = React.createClass({
if (this.props.onTouchTap) this.props.onTouchTap(e);
},
+
+ _isControlled() {
+ return this.props.hasOwnProperty('value') ||
+ this.props.hasOwnProperty('valueLink');
+ },
+
+ _getControlledTime(props = this.props) {
+ if (DateTime.isDateObject(props.value)) {
+ return props.value;
+ } else if (props.valueLink && DateTime.isDateObject(props.valueLink.value)) {
+ return props.valueLink.value;
+ }
+ },
});
module.exports = TimePicker;
diff --git a/src/utils/date-time.js b/src/utils/date-time.js
index 6359e6e7518cd1..bfeb9c2abd3c5d 100644
--- a/src/utils/date-time.js
+++ b/src/utils/date-time.js
@@ -120,6 +120,12 @@ module.exports = {
(d1.getDate() === d2.getDate());
},
+ isEqualTime(t1, t2) {
+ return t1 && t2 &&
+ (t1.getHours() === t2.getHours()) &&
+ (t1.getMinutes() === t2.getMinutes());
+ },
+
isBeforeDate(d1, d2) {
const date1 = this.cloneAsDate(d1);
const date2 = this.cloneAsDate(d2);