TimePicker can be used as a controlled input (support value and valueLink props)

src/time-picker/clock.jsx

@@ -80,8 +80,8 @@ const Clock = React.createClass({
 
     if (this.props.format === 'ampm'){
       buttons = [
-        <ClockButton position="left" onTouchTap={this._setAffix.bind(this, "am")} selected={isAM} >{"AM"}</ClockButton>,
-        <ClockButton position="right" onTouchTap={this._setAffix.bind(this, "pm")} selected={!isAM} >{"PM"}</ClockButton>,
+        <ClockButton key="AM" position="left" onTouchTap={this._setAffix.bind(this, "am")} selected={isAM} >{"AM"}</ClockButton>,
+        <ClockButton key="PM" position="right" onTouchTap={this._setAffix.bind(this, "pm")} selected={!isAM} >{"PM"}</ClockButton>,
       ];
     }
     return buttons;

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;

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);