diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx
index 8400d0fdf0a181..2425ba2093a939 100644
--- a/docs/src/app/components/pages/components/date-picker.jsx
+++ b/docs/src/app/components/pages/components/date-picker.jsx
@@ -18,7 +18,8 @@ class DatePickerPage extends React.Component {
       minDate: minDate,
       maxDate: maxDate,
       autoOk: false,
-      showYearSelector: false
+      showYearSelector: false,
+      controlledDate: new Date('2015/07/15')
     };
   }
 
@@ -31,7 +32,12 @@ class DatePickerPage extends React.Component {
       '//Landscape Dialog\n' +
       '<DatePicker\n' +
       '  hintText="Landscape Dialog"\n' +
-      '  mode="landscape"/>\n\n'+
+      '  mode="landscape"/>\n\n' +
+      '//Controlled Input\n' +
+      '<DatePicker\n' +
+      '  hintText="Controlled Date Input"\n' +
+      '  value={this.state.controlledDate}\n' +
+      '  onChange={this._handleChange} />\n\n' +
       '// Ranged Date Picker\n' +
       '<DatePicker\n' +
       '  hintText="Ranged Date Picker"\n' +
@@ -132,6 +138,19 @@ class DatePickerPage extends React.Component {
             desc: 'Sets the date value to d, where d is a date object.'
           }
         ]
+      },
+      {
+        name: 'Events',
+        infoArray: [
+          {
+            name: 'onChange',
+            header: 'function(nill, date)',
+            desc: 'Callback function that is fired when the date value ' +
+            'changes. Since there is no particular event associated with ' +
+            'the change the first argument will always be null and the second ' +
+            'argument will be the new Date instance.'
+          },
+        ]
       }
     ];
 
@@ -153,6 +172,11 @@ class DatePickerPage extends React.Component {
           hintText="Landscape Dialog"
           mode="landscape" />
 
+        <DatePicker
+          hintText="Controlled Date Input"
+          value={this.state.controlledDate}
+          onChange={this._handleChange.bind(this)} />
+
         <DatePicker
           hintText="Ranged Date Picker"
           autoOk={this.state.autoOk}
@@ -207,6 +231,9 @@ class DatePickerPage extends React.Component {
     this.setState(state);
   }
 
+  _handleChange(nill, date) {
+    this.setState({controlledDate: date});
+  }
 }
 
 module.exports = DatePickerPage;
diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx
index 190b6f78a7619e..095c2e5b3c5931 100644
--- a/src/date-picker/date-picker.jsx
+++ b/src/date-picker/date-picker.jsx
@@ -57,6 +57,7 @@ let DatePicker = React.createClass({
   render() {
     let {
       autoOk,
+      defaultDate,
       formatDate,
       maxDate,
       minDate,
@@ -72,8 +73,13 @@ let DatePicker = React.createClass({
     } = this.props;
     let defaultInputValue;
 
-    if (this.props.defaultDate) {
-      defaultInputValue = this.props.formatDate(this.props.defaultDate);
+    if (defaultDate) {
+      defaultInputValue = formatDate(defaultDate);
+    }
+
+    // Format the date of controlled inputs
+    if (other.value) {
+      other.value = formatDate(other.value);
     }
 
     return (
@@ -111,7 +117,9 @@ let DatePicker = React.createClass({
     this.setState({
       date: d,
     });
-    this.refs.input.setValue(this.props.formatDate(d));
+    if (!this._isControlled()) {
+      this.refs.input.setValue(this.props.formatDate(d));
+    }
   },
 
   _handleDialogAccept(d) {
@@ -141,6 +149,11 @@ let DatePicker = React.createClass({
     //TO DO: open the dialog if input has focus
   },
 
+  _isControlled() {
+    return this.props.hasOwnProperty('value') ||
+      this.props.hasOwnProperty('valueLink');
+  },
+
 });
 
 module.exports = DatePicker;