Allow customizing year label.

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, {

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({
       <div className="text-muted pull-left datepicker-previous-wrapper" onClick={this.handleClickPrevious} style={{cursor: 'pointer'}}>
         {this.displayingMinMonth() ? null : this.props.previousButtonElement}
       </div>
-      <span>{this.props.monthLabels[this.props.displayDate.getMonth()]} {this.props.displayDate.getFullYear()}</span>
+      <span className="datepicker-header-label">{this.props.monthLabels[this.props.displayDate.getMonth()]} {this.displayYearLabel()}</span>
       <div className="text-muted pull-right datepicker-next-wrapper" onClick={this.handleClickNext} style={{cursor: 'pointer'}}>
         {this.displayingMaxMonth() ? null : this.props.nextButtonElement}
       </div>
@@ -259,6 +265,7 @@ export default createReactClass({
     placeholder: PropTypes.string,
     dayLabels: PropTypes.array,
     monthLabels: PropTypes.array,
+    getYearLabel: PropTypes.func,
     onChange: PropTypes.func,
     onClear: PropTypes.func,
     onBlur: PropTypes.func,
@@ -636,6 +643,7 @@ export default createReactClass({
       maxDate={this.props.maxDate}
       onChange={this.onChangeMonth}
       monthLabels={this.props.monthLabels}
+      getYearLabel={this.props.getYearLabel}
       dateFormat={this.props.dateFormat} />;
 
     const control = this.props.customControl

test/core.test.jsx

@@ -1101,4 +1101,24 @@ describe("Date Picker", function() {
     assert.notEqual(popover, null);
     ReactDOM.unmountComponentAtNode(container);
   }));
+  it("should allow customizing year label of calendar header", co.wrap(function *(){
+    const id = UUID.v4();
+    const value = "2017-01-01T12:00:00.000Z";
+    const decorate = (date) => `[ ${date.getFullYear()} ]`;
+    const App = createReactClass({
+      render: function(){
+        return <div>
+          <DatePicker id={id} value={value} getYearLabel={decorate} />
+        </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    const inputElement = document.querySelector("input.form-control");
+    TestUtils.Simulate.focus(inputElement);
+    const headerLabel = document.querySelector(".datepicker-header-label");
+    assert.ok(headerLabel.innerHTML.match(/\[ 2017 \]/));
+    ReactDOM.unmountComponentAtNode(container);
+  }));
 });