diff --git a/docs/datepicker.md b/docs/datepicker.md index cfa4565a0..f1bf3b626 100644 --- a/docs/datepicker.md +++ b/docs/datepicker.md @@ -45,6 +45,7 @@ General datepicker component. |`onFocus`|`func`|`function() {}`|| |`onKeyDown`|`func`|`function() {}`|| |`onMonthChange`|`func`|`function() {}`|| +|`onYearChange`|`func`|`function() {}`|| |`onSelect`|`func`|`function() {}`|| |`onWeekSelect`|`func`||| |`openToDate`|`object`||| @@ -77,4 +78,4 @@ General datepicker component. |`value`|`string`||| |`weekLabel`|`string`||| |`withPortal`|`bool`|`false`|| -|`yearDropdownItemNumber`|`number`||| \ No newline at end of file +|`yearDropdownItemNumber`|`number`||| diff --git a/src/calendar.jsx b/src/calendar.jsx index b538a3788..85dbb81fa 100644 --- a/src/calendar.jsx +++ b/src/calendar.jsx @@ -67,6 +67,7 @@ export default class Calendar extends React.Component { monthsShown: PropTypes.number, onClickOutside: PropTypes.func.isRequired, onMonthChange: PropTypes.func, + onYearChange: PropTypes.func, forceShowMonthNavigation: PropTypes.bool, onDropdownFocus: PropTypes.func, onSelect: PropTypes.func.isRequired, @@ -187,6 +188,12 @@ export default class Calendar extends React.Component { handleMonthMouseLeave = () => this.setState({ selectingDate: null }) + handleYearChange = (date) => { + if (this.props.onYearChange) { + this.props.onYearChange(date) + } + } + handleMonthChange = (date) => { if (this.props.onMonthChange) { this.props.onMonthChange(date) @@ -204,7 +211,7 @@ export default class Calendar extends React.Component { changeYear = (year) => { this.setState({ date: setYear(cloneDate(this.state.date), year) - }) + }, () => this.handleYearChange(this.state.date)) } changeMonth = (month) => { diff --git a/src/index.jsx b/src/index.jsx index be70aff73..d845b01a3 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -86,6 +86,7 @@ export default class DatePicker extends React.Component { onFocus: PropTypes.func, onKeyDown: PropTypes.func, onMonthChange: PropTypes.func, + onYearChange: PropTypes.func, openToDate: PropTypes.object, peekNextMonth: PropTypes.bool, placeholderText: PropTypes.string, @@ -138,6 +139,7 @@ export default class DatePicker extends React.Component { onSelect () {}, onClickOutside () {}, onMonthChange () {}, + onYearChange () {}, monthsShown: 1, withPortal: false, shouldCloseOnSelect: true, @@ -456,6 +458,7 @@ export default class DatePicker extends React.Component { monthsShown={this.props.monthsShown} onDropdownFocus={this.handleDropdownFocus} onMonthChange={this.props.onMonthChange} + onYearChange={this.props.onYearChange} dayClassName={this.props.dayClassName} showTimeSelect={this.props.showTimeSelect} onTimeChange={this.handleTimeChange} diff --git a/test/calendar_test.js b/test/calendar_test.js index 822085c4e..39f7ce74a 100644 --- a/test/calendar_test.js +++ b/test/calendar_test.js @@ -336,6 +336,32 @@ describe('Calendar', function () { }) }) + describe('onYearChange', () => { + let onYearChangeSpy = sinon.spy() + let calendar + + beforeEach(() => { + onYearChangeSpy = sinon.spy() + calendar = mount( + {}} + onClickOutside={() => {}} + hideCalendar={() => {}} + dropdownMode="select" + showYearDropdown + onYearChange={onYearChangeSpy}/> + ) + }) + + it('calls onYearChange prop when year changed from year dropdown', () => { + const select = calendar.find(YearDropdown).find('select') + select.simulate('change') + + assert(onYearChangeSpy.called === true, 'onYearChange should be called') + }) + }) + describe('onDropdownFocus', () => { let onDropdownFocusSpy = sinon.spy() let calendar diff --git a/test/datepicker_test.js b/test/datepicker_test.js index 481d7eb51..c0c96ad40 100644 --- a/test/datepicker_test.js +++ b/test/datepicker_test.js @@ -133,6 +133,27 @@ describe('DatePicker', () => { }) }) + it('should fire onYearChange when the year is selected', (done) => { + const onYearChangeSpy = sinon.spy() + const datePicker = mount( + + ) + const dateInputWrapper = datePicker.find('input') + + dateInputWrapper.simulate('click') + const calendarWrapper = datePicker.find('Calendar') + const yearSelect = calendarWrapper.find('.react-datepicker__year-select') + yearSelect.simulate('change') + + defer(() => { + assert(onYearChangeSpy.called === true, 'onYearChange should be called') + done() + }) + }) + it('should keep the calendar shown when clicking the calendar', () => { var datePicker = TestUtils.renderIntoDocument(