Merge pull request #7 from AmauriAires/fix-startDate-and-endDate-props

Allow startDate and endDate to be altered

Author: snamoah

README.md

@@ -33,8 +33,8 @@ Almost all the props available for [react-datetime](https://github.com/YouCanBoo
 
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
-| startDate | `Date` | `new Date()` | This sets the initial start date |
-| endDate | `Date` | `new Date()` | This sets the initial end date |
+| startDate | `Date` | `new Date()` | This sets a value for the start date |
+| endDate | `Date` | `new Date()` | This sets a value for the end date |
 | dateFormat | `Boolean` or `String` | `true` | Defines the format for the date. It accepts any `Moment` date format (not in localized format). If `true` the date will be displayed using the defaults for the current `locale`. If `false` the datepicker is disabled and the component can be used as timepicker. |
 | timeFormat | `Boolean` or `String` | `true` | Defines the format for the time. It accepts any `Moment` time format (not in localized format). If `true` the time will be displayed using the defaults for the current `locale`. If `false` the timepicker is disabled and the component can be used as datepicker. |
 | utc | `boolean` | `false` | When true, start and end time values will be interpreted as UTC. Otherwise they will default to the user's local timezone. |

lib/index.jsx

@@ -13,11 +13,24 @@ class DatetimeRangePicker extends Component {
     super(props);
 
     this.state = {
-      start: moment(props.startDate) || moment(),
-      end: moment(props.endDate) || moment(),
+      start: null,
+      end: null,
+      startDate: null,
+      endDate: null,
     };
   }
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    return nextProps.startDate === prevState.startDate && nextProps.endDate === prevState.endDate
+      ? {}
+      : { 
+          start: moment(nextProps.startDate) || moment(), 
+          end: moment(nextProps.endDate) || moment(), 
+          startDate: nextProps.startDate, 
+          endDate: nextProps.endDate, 
+        }
+  }
+
   getInputProps() {
     const inputReadOnlyStyle = {
       cursor: 'pointer',
@@ -66,7 +79,7 @@ class DatetimeRangePicker extends Component {
     return {
       ...baseProps,
       ...inputProps,
-      defaultValue: this.props.startDate,
+      value: this.state.start,
       onBlur: this.props.onStartDateBlur,
       onFocus: this.props.onStartDateFocus,
       timeConstraints: this.props.startTimeConstraints,
@@ -81,7 +94,7 @@ class DatetimeRangePicker extends Component {
       ...baseProps,
       ...inputProps,
       onBlur: this.props.onEndDateBlur,
-      defaultValue: this.props.endDate,
+      value: this.state.end,
       onFocus: this.props.onEndDateFocus,
       timeConstraints: this.props.endTimeConstraints,
     };
@@ -223,9 +236,11 @@ DatetimeRangePicker.propTypes = {
   onStartDateFocus: PropTypes.func,
   onStartDateChange: PropTypes.func,
   pickerClassName: PropTypes.string,
-  endDate: PropTypes.oneOfType([PropTypes.instanceOf(Moment), PropTypes.instanceOf(Date)]),
+  defaultEndDate: PropTypes.oneOfType([PropTypes.instanceOf(moment), PropTypes.instanceOf(Date)]),
+  endDate: PropTypes.oneOfType([PropTypes.instanceOf(moment), PropTypes.instanceOf(Date)]),
   endTimeConstraints: PropTypes.object,   // eslint-disable-line
-  startDate: PropTypes.oneOfType([PropTypes.instanceOf(Moment), PropTypes.instanceOf(Date)]),
+  startDate: PropTypes.oneOfType([PropTypes.instanceOf(moment), PropTypes.instanceOf(Date)]),
+  defaultStartDate: PropTypes.oneOfType([PropTypes.instanceOf(moment), PropTypes.instanceOf(Date)]),
   startTimeConstraints: PropTypes.object,   // eslint-disable-line
   dateFormat: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   timeFormat: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-datetime-range-picker",
-  "description": "Resusable date time range picker",
-  "version": "1.0.6",
+  "description": "Reusable date time range picker",
+  "version": "1.0.7",
   "author": "Samuel Amoah <sa.am@programmer.net>",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
     "prop-types": "^15.5.10"
   },
   "peerDependencies": {
-    "react": "^15.6.1",
+    "react": "^16.3.0",
     "react-datetime": "^2.8.10"
   },
   "scripts": {