Merge pull request #23 from CrowdTangle/george/timezone

George/timezone
CrowdTangle · Dec 4, 2019 · bbddf6f · bbddf6f
2 parents 4eef73d + 51e3e23
commit bbddf6f
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 36 deletions.
diff --git a/app/js/date-view.jsx b/app/js/date-view.jsx
@@ -277,7 +277,7 @@ class DatePicker extends React.Component {
                     {this.renderArrow("forward")}
                 </h3>
                 {this.renderDayLetters()}
-                <MonthView selectedDate={this.props.selectedDate} minDate={this.props.minDate} maxDate={this.props.maxDate} handleSelection={this.handleSelection.bind(this)} date={this.state.date} />
+                <MonthView timezone={this.props.timezone} selectedDate={this.props.selectedDate} minDate={this.props.minDate} maxDate={this.props.maxDate} handleSelection={this.handleSelection.bind(this)} date={this.state.date} />
                 {this.renderTimePicker()}
             </div>
         );

diff --git a/app/js/datepicker.jsx b/app/js/datepicker.jsx
@@ -45,11 +45,15 @@ class DatePicker extends React.Component {
 
 
         if (!startDate) {
-            startDate = moment.tz(this.props.timezone);
+          startDate = moment.tz(this.props.timezone);
+        } else {
+          startDate.tz(this.props.timezone);
         }
 
         if (!endDate) {
-            endDate = moment.tz(startDate, this.props.timezone).add(1, "months");
+          endDate = moment.tz(startDate, this.props.timezone).add(1, "months");
+        } else {
+          endDate.tz(this.props.timezone);
         }
 
         let dateFormat;
@@ -83,16 +87,29 @@ class DatePicker extends React.Component {
     componentDidMount() {
         if (this.props.isRange) {
             this.props.onChange({
-                startDate: this.state.startDate,
-                endDate: this.state.endDate
+                startDate: clone(this.state.startDate, this.props.timezone),
+                endDate: clone(this.state.endDate, this.props.timezone)
             });
         } else {
             this.props.onChange({
-                date: this.state.startDate
+                date: clone(this.state.startDate, this.props.timezone)
             });
         }
     }
 
+    getValue() {
+      if (this.props.isRange) {
+          return {
+              startDate: clone(this.state.startDate, this.props.timezone),
+              endDate: clone(this.state.endDate, this.props.timezone)
+          };
+      } else {
+          return {
+              date: clone(this.state.startDate, this.props.timezone)
+          };
+      }
+    }
+
     componentWillReceiveProps(newProps) {
         // if the date has changed from the parent AND
         // it's different than the date we have in state, use it
@@ -109,11 +126,15 @@ class DatePicker extends React.Component {
             let startDate = newProps.defaultDate;
 
             if (!startDate) {
-                startDate = moment.tz(newProps.timezone);
+              startDate = moment.tz(newProps.timezone);
+            } else {
+              startDate = startDate.tz(newProps.timezone);
             }
 
             if (!endDate) {
-                endDate = startDate.clone().add(1, "months");
+              endDate = clone(startDate, newProps.timezone).add(1, "months");
+            } else {
+              endDate = endDate.tz(newProps.timezone);
             }
 
             this.setState({
@@ -165,8 +186,10 @@ class DatePicker extends React.Component {
     }
 
     validateDateString(string) {
-        // Chrono returns a datetime stamp for valid dates, and for invalid dates, returns null
-        return chrono.parseDate(string);
+      // add the timezone onto the string so it's properly converted
+      // Chrono returns a datetime stamp for valid dates, and for invalid dates, returns null
+      const date = chrono.parseDate(string + " " + moment.tz(this.props.timezone).format('Z'));
+      return date;
     }
 
     /**** handlers ****/
@@ -207,7 +230,7 @@ class DatePicker extends React.Component {
     }
 
     handleDateSelection(type, date, options) {
-        var mutableDate = date.clone();
+        var mutableDate = clone(date, this.props.timezone);
 
         // round to make sure it's simply the same date;
         mutableDate.hour(0).minute(0).second(0).millisecond(0);
@@ -360,7 +383,7 @@ class DatePicker extends React.Component {
             return <DateView
                 ref={this.dateView}
                 enableTime={this.props.enableTime}
-                selectedDate={this.state[type].clone()}
+                selectedDate={clone(this.state[type], this.props.timezone)}
                 timezone={this.props.timezone}
                 maxDate={this.getMaxDateForType(type)}
                 minDate={this.getMinDateForType(type)}
@@ -445,5 +468,9 @@ function noop(data) {
     console.log("changing", data);
 }
 
+function clone(m, tz) {
+  return moment.tz(m.valueOf(), tz);
+}
+
 
 module.exports = DatePicker;
diff --git a/app/js/week-row.jsx b/app/js/week-row.jsx
@@ -19,7 +19,8 @@ class WeekRow extends React.Component {
     }
 
     handleClick(date) {
-        this.props.handleSelection(moment.tz(date, "MM/DD/YYYY", this.props.timezone));
+        const m = moment.tz(date, "MM/DD/YYYY", this.props.timezone);
+        this.props.handleSelection(m);
     }
 
     renderDates() {

diff --git a/build/js/date-view.js b/build/js/date-view.js
@@ -404,7 +404,7 @@ var DatePicker = function (_React$Component) {
                     this.renderArrow("forward")
                 ),
                 this.renderDayLetters(),
-                _react2.default.createElement(_monthView2.default, { selectedDate: this.props.selectedDate, minDate: this.props.minDate, maxDate: this.props.maxDate, handleSelection: this.handleSelection.bind(this), date: this.state.date }),
+                _react2.default.createElement(_monthView2.default, { timezone: this.props.timezone, selectedDate: this.props.selectedDate, minDate: this.props.minDate, maxDate: this.props.maxDate, handleSelection: this.handleSelection.bind(this), date: this.state.date }),
                 this.renderTimePicker()
             );
         }

diff --git a/build/js/datepicker.js b/build/js/datepicker.js
@@ -51,10 +51,14 @@ var DatePicker = function (_React$Component) {
 
         if (!startDate) {
             startDate = _momentTimezone2.default.tz(_this.props.timezone);
+        } else {
+            startDate.tz(_this.props.timezone);
         }
 
         if (!endDate) {
             endDate = _momentTimezone2.default.tz(startDate, _this.props.timezone).add(1, "months");
+        } else {
+            endDate.tz(_this.props.timezone);
         }
 
         var dateFormat = void 0;
@@ -91,15 +95,29 @@ var DatePicker = function (_React$Component) {
         value: function componentDidMount() {
             if (this.props.isRange) {
                 this.props.onChange({
-                    startDate: this.state.startDate,
-                    endDate: this.state.endDate
+                    startDate: clone(this.state.startDate, this.props.timezone),
+                    endDate: clone(this.state.endDate, this.props.timezone)
                 });
             } else {
                 this.props.onChange({
-                    date: this.state.startDate
+                    date: clone(this.state.startDate, this.props.timezone)
                 });
             }
         }
+    }, {
+        key: "getValue",
+        value: function getValue() {
+            if (this.props.isRange) {
+                return {
+                    startDate: clone(this.state.startDate, this.props.timezone),
+                    endDate: clone(this.state.endDate, this.props.timezone)
+                };
+            } else {
+                return {
+                    date: clone(this.state.startDate, this.props.timezone)
+                };
+            }
+        }
     }, {
         key: "componentWillReceiveProps",
         value: function componentWillReceiveProps(newProps) {
@@ -111,10 +129,14 @@ var DatePicker = function (_React$Component) {
 
                 if (!startDate) {
                     startDate = _momentTimezone2.default.tz(newProps.timezone);
+                } else {
+                    startDate = startDate.tz(newProps.timezone);
                 }
 
                 if (!endDate) {
-                    endDate = startDate.clone().add(1, "months");
+                    endDate = clone(startDate, newProps.timezone).add(1, "months");
+                } else {
+                    endDate = endDate.tz(newProps.timezone);
                 }
 
                 this.setState({
@@ -170,8 +192,10 @@ var DatePicker = function (_React$Component) {
     }, {
         key: "validateDateString",
         value: function validateDateString(string) {
+            // add the timezone onto the string so it's properly converted
             // Chrono returns a datetime stamp for valid dates, and for invalid dates, returns null
-            return _chronoNode2.default.parseDate(string);
+            var date = _chronoNode2.default.parseDate(string + " " + _momentTimezone2.default.tz(this.props.timezone).format('Z'));
+            return date;
         }
 
         /**** handlers ****/
@@ -216,7 +240,7 @@ var DatePicker = function (_React$Component) {
     }, {
         key: "handleDateSelection",
         value: function handleDateSelection(type, date, options) {
-            var mutableDate = date.clone();
+            var mutableDate = clone(date, this.props.timezone);
 
             // round to make sure it's simply the same date;
             mutableDate.hour(0).minute(0).second(0).millisecond(0);
@@ -390,7 +414,7 @@ var DatePicker = function (_React$Component) {
                 return _react2.default.createElement(_dateView2.default, {
                     ref: this.dateView,
                     enableTime: this.props.enableTime,
-                    selectedDate: this.state[type].clone(),
+                    selectedDate: clone(this.state[type], this.props.timezone),
                     timezone: this.props.timezone,
                     maxDate: this.getMaxDateForType(type),
                     minDate: this.getMinDateForType(type),
@@ -513,4 +537,8 @@ function noop(data) {
     console.log("changing", data);
 }
 
+function clone(m, tz) {
+    return _momentTimezone2.default.tz(m.unix() * 1000, tz);
+}
+
 module.exports = DatePicker;
diff --git a/build/js/week-row.js b/build/js/week-row.js
@@ -42,7 +42,8 @@ var WeekRow = function (_React$Component) {
     _createClass(WeekRow, [{
         key: 'handleClick',
         value: function handleClick(date) {
-            this.props.handleSelection(_momentTimezone2.default.tz(date, "MM/DD/YYYY", this.props.timezone));
+            var m = _momentTimezone2.default.tz(date, "MM/DD/YYYY", this.props.timezone);
+            this.props.handleSelection(m);
         }
     }, {
         key: 'renderDates',

diff --git a/demo/bundle.js b/demo/bundle.js
diff --git a/demo/main.jsx b/demo/main.jsx
@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
 import DatePicker from '../app/js/datepicker.jsx';
-import moment from 'moment';
+import moment from 'moment-timezone';
 
 
 class ControlledComponent extends Component {
@@ -53,3 +53,7 @@ ReactDOM.render(
 ReactDOM.render(
     <ControlledComponent />, document.getElementById("example-5")
 )
+
+ReactDOM.render(
+    <DatePicker enableTime={true} defaultDate={moment("10/31/2019", "MM/DD/YYYY")} timezone="Asia/Hong_Kong" />, document.getElementById("example-7")
+)
diff --git a/index.html b/index.html
@@ -64,6 +64,18 @@ <h3>minDate, maxDate and defaultDate</h3>
     ReactDOM.render(&lt;DatePicker defaultDate={moment("10/31/2015", "MM/DD/YYYY")}
         minDate={moment("10/21/2015", "MM/DD/YYYY")}
         maxDate={moment("11/21/2015", "MM/DD/YYYY")}  /&gt;, document.getElementById("content"));
+    </code></pre>
+            </section>
+            <section class="example">
+                <h3>Datepicker with timezone</h3>
+                <p>Give the datepicker a timezone to get dates properly zoned in and out</p>
+                <div id="example-7"></div>
+                <pre><code>
+    var DatePicker = require("react-datetimepicker");
+
+    ReactDOM.render(&lt;DatePicker timezone="Asia/Hong_Kong" defaultDate={moment("10/31/2019", "MM/DD/YYYY")} /&gt;,
+                    document.getElementById("content"));
+
     </code></pre>
             </section>
             <section class="example">

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-datetimepicker",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "A simple datepicker for react.",
   "main": "build/js/datepicker.js",
   "scripts": {