After utcOffset property change, update date input value (Hacker0x01#671

)

Add unit test for utcOffset change on date in date input

docs-site/src/examples.scss

@@ -92,3 +92,7 @@
   font: inherit;
   color: #fff;
 }
+
+.example__timezone-selector {
+  margin-left: 10px;
+}

docs-site/src/examples/timezone_date.jsx

@@ -1,38 +1,89 @@
 import React from 'react'
+import moment from 'moment'
+
 import DatePicker from 'react-datepicker'
 
 export default React.createClass({
   displayName: 'Default',
 
   getInitialState () {
     return {
-      startDate: null
+      startDate: null,
+      utcOffset: -4
     }
   },
 
+  timezoneNames: [
+    { name: 'GMT+10', value: 10 },
+    { name: 'GMT+8', value: 8 },
+    { name: 'GMT+4', value: 4 },
+    { name: 'GMT+1', value: 1 },
+    { name: 'GMT', value: 0 },
+    { name: 'GMT-3', value: -3 },
+    { name: 'GMT-4', value: -4 },
+    { name: 'GMT-8', value: -8 },
+    { name: 'GMT-10', value: -10 }
+  ],
+
   handleChange (date) {
     this.setState({
       startDate: date
     })
   },
 
+  handleTmzChange (event) {
+    this.setState({
+      utcOffset: parseInt(event.target.value, 10)
+    })
+  },
+
+  getOffsetLabel (tmz) {
+    var obj = this.timezoneNames.find(function (item) {
+      return item.value === tmz
+    })
+    return (obj && obj.name) || ''
+  },
+
   render () {
+    var selected = this.state.startDate &&
+                   this.state.startDate.clone().utcOffset(this.state.utcOffset)
+    var utcText = this.getOffsetLabel(this.state.utcOffset)
+    var todayTxt = 'Today in ' + utcText
+
     return <div className="row">
       <pre className="column example__code">
         <code className="jsx">
           {'<DatePicker'}<br />
-              {'utcOffset=1320'}<br />
-              {'todayButton="Today"'}<br />
+              {'utcOffset=-4'}<br />
+              {'dateFormat="DD-MMM HH:mm"'}<br />
+              {'todayButton="Today in Puerto Rico"'}<br />
               {'onChange={this.handleChange} />'}
         </code>
       </pre>
       <div className="column">
         <DatePicker
-            utcOffset={1320}
-            dateFormat="DD-MMM HH:mm"
-            todayButton="Today in Farawayland"
-            selected={this.state.startDate}
+            utcOffset={this.state.utcOffset}
+            dateFormat="DD-MMM YYYY HH:mm"
+            todayButton={todayTxt}
+            selected={selected}
+            minDate={moment('2016-11-05T00:00:00+00:00').utcOffset(this.state.utcOffset)}
+            maxDate={moment('2016-12-04T00:00:00-04:00').utcOffset(this.state.utcOffset)}
             onChange={this.handleChange} />
+        <br/>
+        <label className="example__timezone-label">
+          Timezone Offset:
+          <select className="example__timezone-selector" value={this.state.utcOffset} onChange={this.handleTmzChange}>
+            <option value="10">GMT+10:00</option>
+            <option value="8">GMT+08:00</option>
+            <option value="4">GMT+04:00</option>
+            <option value="1">GMT+01:00</option>
+            <option value="0">GMT</option>
+            <option value="-3">GMT-03:00</option>
+            <option value="-4">GMT-04:00</option>
+            <option value="-8">GMT-08:00</option>
+            <option value="-10">GMT-10:00</option>
+          </select>
+        </label>
       </div>
     </div>
   }

docs-site/style.css

@@ -631,6 +631,9 @@ github.com style (c) Vasily Polovnyov <[email protected]>
   font: inherit;
   color: #fff; }
 
+.example__timezone-selector {
+  margin-left: 10px; }
+
 .hero__content, .wrapper {
   max-width: 1100px;
   margin: 0 auto; }

src/date_input.jsx

@@ -1,6 +1,6 @@
 import moment from 'moment'
 import React from 'react'
-import { isSameDay, isDayDisabled } from './date_utils'
+import { isSameDay, isDayDisabled, isSameUtcOffset } from './date_utils'
 
 var DateInput = React.createClass({
   displayName: 'DateInput',
@@ -38,6 +38,7 @@ var DateInput = React.createClass({
 
   componentWillReceiveProps (newProps) {
     if (!isSameDay(newProps.date, this.props.date) ||
+        !isSameUtcOffset(newProps.date, this.props.date) ||
           newProps.locale !== this.props.locale ||
           newProps.dateFormat !== this.props.dateFormat) {
       this.setState({

src/date_utils.js

@@ -8,6 +8,14 @@ export function isSameDay (moment1, moment2) {
   }
 }
 
+export function isSameUtcOffset (moment1, moment2) {
+  if (moment1 && moment2) {
+    return moment1.utcOffset() === moment2.utcOffset()
+  } else {
+    return !moment1 && !moment2
+  }
+}
+
 export function isDayInRange (day, startDate, endDate) {
   const before = startDate.clone().startOf('day').subtract(1, 'seconds')
   const after = endDate.clone().startOf('day').add(1, 'seconds')

test/date_input_test.js

@@ -383,6 +383,25 @@ describe('DateInput', function () {
     })
   })
 
+  describe('utcOffsetChange', function () {
+    it('should rerender with correct date and time when utcOffset prop changes', function () {
+      var date = moment('2015-10-11T00:00:00Z')
+      var newDate = date.clone()
+      var dateFormat = 'YYYY-MM-DD HH:mm'
+      date.utcOffset(-5)
+      var dateInput = shallow(
+        <DateInput date={date} dateFormat={dateFormat}/>
+      )
+      expect(dateInput.find('input').prop('value')).to.equal('2015-10-10 19:00')
+
+      newDate.utcOffset(5)
+      dateInput = shallow(
+        <DateInput date={newDate} dateFormat={dateFormat}/>
+      )
+      expect(dateInput.find('input').prop('value')).to.equal('2015-10-11 05:00')
+    })
+  })
+
   it('should render custom input when customInput is passed as prop', function () {
     var date = moment()
     var dateFormat = 'YYYY-MM-DD'

test/date_utils_test.js

@@ -1,5 +1,6 @@
 import {
   isSameDay,
+  isSameUtcOffset,
   isDayDisabled,
   allDaysDisabledBefore,
   allDaysDisabledAfter,
@@ -28,6 +29,29 @@ describe('date_utils', function () {
     })
   })
 
+  describe('isSameUtcOffset', function () {
+    it('should return true for null dates', function () {
+      expect(isSameUtcOffset(null, null)).to.be.true
+    })
+
+    it('should return false for a null and a non-null date', function () {
+      expect(isSameUtcOffset(moment(), null)).to.be.false
+      expect(isSameUtcOffset(null, moment())).to.be.false
+    })
+
+    it('should return true for non-equal utc offsets, but same dates', function () {
+      expect(isSameUtcOffset(moment('2016-02-10').utcOffset(-3), moment('2016-02-10').utcOffset(5))).to.be.false
+      expect(isSameUtcOffset(moment('2016-02-10').utcOffset(3), moment('2016-02-10').utcOffset(-5))).to.be.false
+      expect(isSameUtcOffset(moment('2016-02-10').utcOffset(180), moment('2016-02-10').utcOffset(-210))).to.be.false
+    })
+
+    it('should return true for equal utc offsets, regardless of dates', function () {
+      expect(isSameUtcOffset(moment('2016-02-10'), moment('2016-02-10'))).to.be.true
+      expect(isSameUtcOffset(moment('2016-02-10').utcOffset(-3), moment('2016-05-10').utcOffset(-3))).to.be.true
+      expect(isSameUtcOffset(moment('2016-12-10').utcOffset(6), moment('2016-02-15').utcOffset(6))).to.be.true
+    })
+  })
+
   describe('isDayDisabled', function () {
     it('should be enabled by default', () => {
       const day = moment()

test/datepicker_test.js

@@ -6,6 +6,7 @@ import defer from 'lodash/defer'
 import DatePicker from '../src/datepicker.jsx'
 import Day from '../src/day'
 import TetherComponent from '../src/tether_component.jsx'
+import TimezoneDatePicker from './timezone_date_picker.jsx'
 import moment from 'moment'
 
 describe('DatePicker', () => {
@@ -425,4 +426,15 @@ describe('DatePicker', () => {
     TestUtils.Simulate.change(input)
     expect(cleared).to.be.true
   })
+  it('should correctly update the date input when utcOffset is all that changes on the selected date', () => {
+    var date = moment('2016-11-22T00:00:00Z').utcOffset(-6)
+    var tmzDatePicker = mount(<TimezoneDatePicker />)
+    tmzDatePicker.setState({startDate: date, utcOffset: -6})
+
+    expect(tmzDatePicker.find('input').prop('value')).to.equal('2016-11-21 18:00')
+
+    tmzDatePicker.setState({utcOffset: 6, startDate: date.clone().utcOffset(6)})
+
+    expect(tmzDatePicker.find('input').prop('value')).to.equal('2016-11-22 06:00')
+  })
 })

test/timezone_date_picker.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import DatePicker from '../src/datepicker.jsx'
+
+class TimezoneDatePicker extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = { startDate: null, utcOffset: -4 }
+  }
+
+  handleChange (date) {
+    this.setState({ startDate: date })
+  }
+
+  render () {
+    var selected = this.state.startDate &&
+                   this.state.startDate.clone().utcOffset(this.state.utcOffset)
+
+    return <DatePicker
+        utcOffset={this.state.utcOffset}
+        dateFormat="YYYY-MM-DD HH:mm"
+        selected={selected}
+        onChange={this.handleChange} />
+  }
+}
+
+export default TimezoneDatePicker