Merge pull request #917 from folio-org/STCOM-484-datepicker-timezone

STCOM-484 consider timezone when parsing datestring that includes an offset
folio-org · Mar 14, 2019 · ceb52d7 · ceb52d7
2 parents df56a1a + 6fa13a1
commit ceb52d7
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v5.0.2...v5.1.0)
 
 * Use `moment.tz()` to display the presentedValue in Datepicker, fixes UIREQ-207.
+* Consider timezone in Datepicker for values containing a time offset. fixes STCOM-484.
 * Update ARIA roles for MCL. STCOM-365
 * Add EndOfList component to MCL component. Part of UIDATIMP-105.
 * Added asterisk for required form fields. STCOM-469

diff --git a/lib/Datepicker/Datepicker.js b/lib/Datepicker/Datepicker.js
@@ -106,9 +106,12 @@ class Datepicker extends React.Component {
       || this.props.input.value === '') {
       presentedValue = '';
       inputValue = moment.tz(parseTimeZone).format(this._dateFormat);
+      if (this.props.value && this.props.value !== '') {
+        inputValue = this.parseInputString(this.props.value);
+        presentedValue = inputValue;
+      }
     } else if (this.props.input.value !== '') {
-      inputValue = moment.tz(this.props.input.value, this._dateFormat, parseTimeZone)
-        .format(this._dateFormat);
+      inputValue = this.parseInputString(this.props.input.value);
       presentedValue = inputValue;
     }
 
@@ -160,6 +163,19 @@ class Datepicker extends React.Component {
     return null;
   }
 
+  parseInputString = (value) => {
+    const offsetRegex = /T[\d.:]+[+-][\d]+$/;
+    let inputMoment;
+    // if date string contains a utc offset, we can parse it as utc time and convert it to selected timezone.
+    if (offsetRegex.test(value)) {
+      inputMoment = moment.tz(value, this.timeZone);
+    } else {
+      inputMoment = moment.tz(value, this._dateFormat, this.timeZone);
+    }
+    const inputValue = inputMoment.format(this._dateFormat);
+    return inputValue;
+  }
+
   textfield = React.createRef();
 
   handleFieldFocus = () => {

diff --git a/lib/Datepicker/tests/Datepicker-ReduxForm-test.js b/lib/Datepicker/tests/Datepicker-ReduxForm-test.js
@@ -350,6 +350,28 @@ describe('Datepicker with Redux Form integration', () => {
     });
   });
 
+  describe('considering timeZone prop when provided a UTC value', () => {
+    let onChange;
+
+    beforeEach(async () => {
+      onChange = mock.fn();
+      await mountWithContext(
+        <TestForm initialValues={{ calendar: '2019-03-14T22:00:00.000+0000' }}>
+          <Field
+            name="calendar"
+            component={Datepicker}
+            onChange={onChange}
+            timeZone="Europe/Kiev"
+          />
+        </TestForm>
+      );
+    });
+
+    it('displays date localized to provided timezone.', () => {
+      expect(datepicker.inputValue).to.equal('03/15/2019');
+    });
+  });
+
   describe('backendDateStandard prop', () => {
     describe('RFC2822', () => {
       let onChange;

diff --git a/lib/Datepicker/tests/Datepicker-test.js b/lib/Datepicker/tests/Datepicker-test.js
@@ -150,6 +150,25 @@ describe('Datepicker', () => {
     });
   });
 
+  describe('considering timeZone prop when provided a UTC value', () => {
+    let onChange;
+
+    beforeEach(async () => {
+      onChange = mock.fn();
+      await mountWithContext(
+        <Datepicker
+          onChange={onChange}
+          timeZone="Europe/Kiev"
+          value="2019-03-14T22:00:00.000+0000"
+        />
+      );
+    });
+
+    it('displays date localized to provided timezone.', () => {
+      expect(datepicker.inputValue).to.equal('03/15/2019');
+    });
+  });
+
   describe('disabled prop', () => {
     let onChange;
     let onBlur;