New functionality to adjust day when changing week, month or year (Hacker0x01#1123)

* Change date on month switch and year select

* Change date on month switch and year select

Prop 'adjustDateOnChange' offers a possibility to update the date
respectively on month switch or year select. Keyboard support.

* Error corrections.

* Added tests for 'adjustDateOnChange'

* Bugfix

Author: forum-is

src/calendar.jsx

@@ -44,6 +44,7 @@ const isDropdownSelect = (element = {}) => {
 
 export default class Calendar extends React.Component {
   static propTypes = {
+    adjustDateOnChange: PropTypes.bool,
     className: PropTypes.string,
     children: PropTypes.node,
     dateFormat: PropTypes.oneOfType([
@@ -93,7 +94,8 @@ export default class Calendar extends React.Component {
     withPortal: PropTypes.bool,
     utcOffset: PropTypes.number,
     weekLabel: PropTypes.string,
-    yearDropdownItemNumber: PropTypes.number
+    yearDropdownItemNumber: PropTypes.number,
+    setOpen: PropTypes.func
   }
 
   static get defaultProps () {
@@ -189,6 +191,14 @@ export default class Calendar extends React.Component {
     if (this.props.onMonthChange) {
       this.props.onMonthChange(date)
     }
+    if (this.props.adjustDateOnChange) {
+      if (this.props.onSelect) {
+        this.props.onSelect(date)
+      }
+      if (this.props.setOpen) {
+        this.props.setOpen(true)
+      }
+    }
   }
 
   changeYear = (year) => {
@@ -276,6 +286,10 @@ export default class Calendar extends React.Component {
     }
     return (
       <YearDropdown
+        adjustDateOnChange={this.props.adjustDateOnChange}
+        date={this.state.date}
+        onSelect={this.props.onSelect}
+        setOpen={this.props.setOpen}
         dropdownMode={this.props.dropdownMode}
         onChange={this.changeYear}
         minDate={this.props.minDate}

src/index.jsx

@@ -44,6 +44,7 @@ const WrappedCalendar = onClickOutside(Calendar)
 
 export default class DatePicker extends React.Component {
   static propTypes = {
+    adjustDateOnChange: PropTypes.bool,
     allowSameDay: PropTypes.bool,
     autoComplete: PropTypes.string,
     autoFocus: PropTypes.bool,
@@ -397,6 +398,9 @@ export default class DatePicker extends React.Component {
           newSelection = addYears(copy, 1)
           break
       }
+      if (this.props.adjustDateOnChange) {
+        this.setSelected(newSelection)
+      }
       this.setPreSelection(newSelection)
     }
   }
@@ -414,6 +418,8 @@ export default class DatePicker extends React.Component {
     return <WrappedCalendar
       ref={(elem) => { this.calendar = elem }}
       locale={this.props.locale}
+      adjustDateOnChange={this.props.adjustDateOnChange}
+      setOpen={this.setOpen}
       dateFormat={this.props.dateFormatCalendar}
       useWeekdaysShort={this.props.useWeekdaysShort}
       dropdownMode={this.props.dropdownMode}

src/year_dropdown.jsx

@@ -8,13 +8,17 @@ var WrappedYearDropdownOptions = onClickOutside(YearDropdownOptions)
 
 export default class YearDropdown extends React.Component {
   static propTypes = {
+    adjustDateOnChange: PropTypes.bool,
     dropdownMode: PropTypes.oneOf(['scroll', 'select']).isRequired,
     maxDate: PropTypes.object,
     minDate: PropTypes.object,
     onChange: PropTypes.func.isRequired,
     scrollableYearDropdown: PropTypes.bool,
     year: PropTypes.number.isRequired,
-    yearDropdownItemNumber: PropTypes.number
+    yearDropdownItemNumber: PropTypes.number,
+    date: PropTypes.object,
+    onSelect: PropTypes.func,
+    setOpen: PropTypes.func
   }
 
   state = {
@@ -46,7 +50,7 @@ export default class YearDropdown extends React.Component {
   )
 
   renderReadView = (visible) => (
-    <div key="read" style={{visibility: visible ? 'visible' : 'hidden'}} className="react-datepicker__year-read-view" onClick={this.toggleDropdown}>
+    <div key="read" style={{visibility: visible ? 'visible' : 'hidden'}} className="react-datepicker__year-read-view" onClick={(event) => this.toggleDropdown(event)}>
       <span className="react-datepicker__year-read-view--down-arrow" />
       <span className="react-datepicker__year-read-view--selected-year">{this.props.year}</span>
     </div>
@@ -80,12 +84,33 @@ export default class YearDropdown extends React.Component {
     this.props.onChange(year)
   }
 
-  toggleDropdown = () => {
+  toggleDropdown = (event) => {
     this.setState({
       dropdownVisible: !this.state.dropdownVisible
+    }, () => {
+      if (this.props.adjustDateOnChange) {
+        this.handleYearChange(this.props.date, event)
+      }
     })
   }
 
+  handleYearChange = (date, event) => {
+    this.onSelect(date, event)
+    this.setOpen()
+  }
+
+  onSelect = (date, event) => {
+    if (this.props.onSelect) {
+      this.props.onSelect(date, event)
+    }
+  }
+
+  setOpen = () => {
+    if (this.props.setOpen) {
+      this.props.setOpen(true)
+    }
+  }
+
   render () {
     let renderedDropdown
     switch (this.props.dropdownMode) {

test/calendar_test.js

@@ -2,8 +2,11 @@ import React from 'react'
 import Calendar from '../src/calendar'
 import Month from '../src/month'
 import Day from '../src/day'
+import ReactDOM from 'react-dom'
+import TestUtils from 'react-dom/test-utils'
 import YearDropdown from '../src/year_dropdown'
 import MonthDropdown from '../src/month_dropdown'
+import DatePicker from '../src/index.jsx'
 import { shallow, mount } from 'enzyme'
 import sinon from 'sinon'
 import * as utils from '../src/date_utils'
@@ -252,6 +255,45 @@ describe('Calendar', function () {
     expect(daysNamesMin.at(6).text()).to.equal('GG')
   })
 
+  it('should set the date to the selected day of the previous month when previous button clicked', () => {
+    let date
+    const expectedDate = '28.06.2017'
+    const datePicker = TestUtils.renderIntoDocument(
+      <DatePicker selected={utils.newDate('2017-07-28')} adjustDateOnChange onChange={(d) => { date = d }}/>
+    )
+    TestUtils.Simulate.focus(ReactDOM.findDOMNode(datePicker.input))
+    const calendar = TestUtils.scryRenderedComponentsWithType(datePicker.calendar, Calendar)[0]
+    const previousButton = TestUtils.findRenderedDOMComponentWithClass(calendar, 'react-datepicker__navigation--previous')
+    TestUtils.Simulate.click(previousButton)
+    expect(utils.formatDate(date, 'DD.MM.YYYY')).to.equal(expectedDate)
+  })
+
+  it('should set the date to the selected day of the next when next button clicked', () => {
+    let date
+    const expectedDate = '28.08.2017'
+    const datePicker = TestUtils.renderIntoDocument(
+      <DatePicker selected={utils.newDate('2017-07-28')} adjustDateOnChange onChange={(d) => { date = d }}/>
+    )
+    TestUtils.Simulate.focus(ReactDOM.findDOMNode(datePicker.input))
+    const calendar = TestUtils.scryRenderedComponentsWithType(datePicker.calendar, Calendar)[0]
+    const nextButton = TestUtils.findRenderedDOMComponentWithClass(calendar, 'react-datepicker__navigation--next')
+    TestUtils.Simulate.click(nextButton)
+    expect(utils.formatDate(date, 'DD.MM.YYYY')).to.equal(expectedDate)
+  })
+
+  it('should set the date to the last possible day of the previous month when previous button clicked', () => {
+    let date
+    const expectedDate = '30.11.2017'
+    const datePicker = TestUtils.renderIntoDocument(
+      <DatePicker selected={utils.newDate('2017-12-31')} adjustDateOnChange onChange={(d) => { date = d }}/>
+    )
+    TestUtils.Simulate.focus(ReactDOM.findDOMNode(datePicker.input))
+    const calendar = TestUtils.scryRenderedComponentsWithType(datePicker.calendar, Calendar)[0]
+    const previousButton = TestUtils.findRenderedDOMComponentWithClass(calendar, 'react-datepicker__navigation--previous')
+    TestUtils.Simulate.click(previousButton)
+    expect(utils.formatDate(date, 'DD.MM.YYYY')).to.equal(expectedDate)
+  })
+
   describe('onMonthChange', () => {
     let onMonthChangeSpy = sinon.spy()
     let calendar