Merge pull request #24 from Hacker0x01/fix-onchange-handler

Use props instead of state to pass the selected date

Author: RSO

example.html

@@ -16,13 +16,32 @@ <h1>ReactJS DatePicker Example</h1>
     <script type="text/javascript">
       var container = document.querySelector('#datepicker-container');
       var log = document.querySelector('#log');
-      var component = DatePicker({
-        onChange: function(date) {
+      var exampleComponent = React.createClass({
+        displayName: 'exampleComponent',
+
+        getInitialState: function() {
+          return {
+            date: moment()
+          };
+        },
+
+        handleChange: function(date) {
+          this.setState({
+            date: date
+          });
+
           log.innerText = "You've selected: " + date.format();
+        },
+
+        render: function() {
+          return DatePicker({
+            selected: this.state.date,
+            onChange: this.handleChange
+          });
         }
-      });
+      })
 
-      React.renderComponent(component, container);
+      React.renderComponent(exampleComponent(), container);
     </script>
   </body>
 </html>

react-datepicker.js

@@ -2,19 +2,20 @@
 /** @jsx React.DOM */
 
 var Day = _dereq_('./day');
+var DateUtil = _dereq_('./util/date');
 
 var Calendar = React.createClass({displayName: 'Calendar',
   getInitialState: function() {
     return {
-      date: this.props.selected.clone()
+      date: new DateUtil(this.props.selected).clone()
     };
   },
 
   componentWillReceiveProps: function(nextProps) {
     // When the selected date changed
     if (nextProps.selected !== this.props.selected) {
       this.setState({
-        date: nextProps.selected.clone()
+        date: new DateUtil(nextProps.selected).clone()
       });
     }
   },
@@ -54,7 +55,7 @@ var Calendar = React.createClass({displayName: 'Calendar',
         day:day,
         date:this.state.date,
         onSelect:this.props.onSelect,
-        selected:this.props.selected} )
+        selected:new DateUtil(this.props.selected)} )
     );
   },
 
@@ -96,22 +97,17 @@ var Calendar = React.createClass({displayName: 'Calendar',
 
 module.exports = Calendar;
 
-},{"./day":3}],2:[function(_dereq_,module,exports){
+},{"./day":3,"./util/date":5}],2:[function(_dereq_,module,exports){
 /** @jsx React.DOM */
 
-var DateUtil = _dereq_('./util/date');
 var Popover  = _dereq_('./popover');
 var Calendar = _dereq_('./calendar');
 
 var DatePicker = React.createClass({displayName: 'DatePicker',
   getInitialState: function() {
-    var value = this.props.value;
-    var selected = new DateUtil(moment(value)); // If value is undefined moment defaults to today
-
     return {
       focus: false,
-      selected: selected,
-      value: selected.format("YYYY-MM-DD")
+      value: this.props.selected.format("YYYY-MM-DD")
     };
   },
 
@@ -162,23 +158,18 @@ var DatePicker = React.createClass({displayName: 'DatePicker',
 
   setSelected: function(date) {
     this.setState({
-      selected: date,
       value: date.format("YYYY-MM-DD")
     });
 
     this.props.onChange(date.moment());
   },
 
-  inputValue: function() {
-    return this.state.selected.format("YYYY-MM-DD");
-  },
-
   calendar: function() {
     if (this.state.focus) {
       return (
         Popover(null, 
           Calendar(
-            {selected:this.state.selected,
+            {selected:this.props.selected,
             onSelect:this.handleSelect,
             onClick:this.handleCalendarClick} )
         )
@@ -225,7 +216,7 @@ var DatePicker = React.createClass({displayName: 'DatePicker',
 
 module.exports = DatePicker;
 
-},{"./calendar":1,"./popover":4,"./util/date":5}],3:[function(_dereq_,module,exports){
+},{"./calendar":1,"./popover":4}],3:[function(_dereq_,module,exports){
 /** @jsx React.DOM */
 
 var Day = React.createClass({displayName: 'Day',

src/calendar.js

@@ -1,19 +1,20 @@
 /** @jsx React.DOM */
 
 var Day = require('./day');
+var DateUtil = require('./util/date');
 
 var Calendar = React.createClass({
   getInitialState: function() {
     return {
-      date: this.props.selected.clone()
+      date: new DateUtil(this.props.selected).clone()
     };
   },
 
   componentWillReceiveProps: function(nextProps) {
     // When the selected date changed
     if (nextProps.selected !== this.props.selected) {
       this.setState({
-        date: nextProps.selected.clone()
+        date: new DateUtil(nextProps.selected).clone()
       });
     }
   },
@@ -53,7 +54,7 @@ var Calendar = React.createClass({
         day={day}
         date={this.state.date}
         onSelect={this.props.onSelect}
-        selected={this.props.selected} />
+        selected={new DateUtil(this.props.selected)} />
     );
   },
 

src/datepicker.js

@@ -1,18 +1,13 @@
 /** @jsx React.DOM */
 
-var DateUtil = require('./util/date');
 var Popover  = require('./popover');
 var Calendar = require('./calendar');
 
 var DatePicker = React.createClass({
   getInitialState: function() {
-    var value = this.props.value;
-    var selected = new DateUtil(moment(value)); // If value is undefined moment defaults to today
-
     return {
       focus: false,
-      selected: selected,
-      value: selected.format("YYYY-MM-DD")
+      value: this.props.selected.format("YYYY-MM-DD")
     };
   },
 
@@ -63,23 +58,18 @@ var DatePicker = React.createClass({
 
   setSelected: function(date) {
     this.setState({
-      selected: date,
       value: date.format("YYYY-MM-DD")
     });
 
     this.props.onChange(date.moment());
   },
 
-  inputValue: function() {
-    return this.state.selected.format("YYYY-MM-DD");
-  },
-
   calendar: function() {
     if (this.state.focus) {
       return (
         <Popover>
           <Calendar
-            selected={this.state.selected}
+            selected={this.props.selected}
             onSelect={this.handleSelect}
             onClick={this.handleCalendarClick} />
         </Popover>