diff --git a/lib/index.js b/lib/index.js index 2e74bfc..6af2870 100644 --- a/lib/index.js +++ b/lib/index.js @@ -53,6 +53,7 @@ var CalendarHeader = (0, _createReactClass2.default)({ maxDate: _propTypes2.default.string, onChange: _propTypes2.default.func.isRequired, monthLabels: _propTypes2.default.array.isRequired, + getYearLabel: _propTypes2.default.func, previousButtonElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired, nextButtonElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired }, @@ -71,6 +72,12 @@ var CalendarHeader = (0, _createReactClass2.default)({ var maxDate = new Date(this.props.maxDate); return maxDate.getFullYear() == displayDate.getFullYear() && maxDate.getMonth() == displayDate.getMonth(); }, + displayYearLabel: function displayYearLabel() { + var getYearLabel = this.props.getYearLabel || function (date) { + return date.getFullYear(); + }; + return getYearLabel(this.props.displayDate); + }, handleClickPrevious: function handleClickPrevious() { var newDisplayDate = new Date(this.props.displayDate); newDisplayDate.setDate(1); @@ -94,10 +101,10 @@ var CalendarHeader = (0, _createReactClass2.default)({ ), _react2.default.createElement( 'span', - null, + { className: 'datepicker-header-label' }, this.props.monthLabels[this.props.displayDate.getMonth()], ' ', - this.props.displayDate.getFullYear() + this.displayYearLabel() ), _react2.default.createElement( 'div', @@ -315,6 +322,7 @@ exports.default = (0, _createReactClass2.default)({ placeholder: _propTypes2.default.string, dayLabels: _propTypes2.default.array, monthLabels: _propTypes2.default.array, + getYearLabel: _propTypes2.default.func, onChange: _propTypes2.default.func, onClear: _propTypes2.default.func, onBlur: _propTypes2.default.func, @@ -657,6 +665,7 @@ exports.default = (0, _createReactClass2.default)({ maxDate: this.props.maxDate, onChange: this.onChangeMonth, monthLabels: this.props.monthLabels, + getYearLabel: this.props.getYearLabel, dateFormat: this.props.dateFormat }); var control = this.props.customControl ? _react2.default.cloneElement(this.props.customControl, { diff --git a/src/index.jsx b/src/index.jsx index af39f9a..c4cb667 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -21,6 +21,7 @@ const CalendarHeader = createReactClass({ maxDate: PropTypes.string, onChange: PropTypes.func.isRequired, monthLabels: PropTypes.array.isRequired, + getYearLabel: PropTypes.func, previousButtonElement: PropTypes.oneOfType([ PropTypes.string, PropTypes.object @@ -47,6 +48,11 @@ const CalendarHeader = createReactClass({ return maxDate.getFullYear() == displayDate.getFullYear() && maxDate.getMonth() == displayDate.getMonth(); }, + displayYearLabel() { + const getYearLabel = this.props.getYearLabel || (date => date.getFullYear()); + return getYearLabel(this.props.displayDate); + }, + handleClickPrevious() { const newDisplayDate = new Date(this.props.displayDate); newDisplayDate.setDate(1); @@ -66,7 +72,7 @@ const CalendarHeader = createReactClass({