Month year picker (#1680)

* add basic month picker

* Added new option of Month/Year picker

* Add tests

Author: gautam-pahuja

docs-site/bundle.js

@@ -55,6 +55,7 @@ import RenderCustomHeader from "./examples/render_custom_header";
 import RenderCustomDay from "./examples/render_custom_day";
 import TimeInput from "./examples/timeInput";
 import StrictParsing from "./examples/strict_parsing";
+import MonthPicker from "./examples/month_picker";
 import "react-datepicker/dist/react-datepicker.css";
 import "./style.scss";
 
@@ -275,6 +276,10 @@ export default class exampleComponents extends React.Component {
     {
       title: "Strict parsing",
       component: <StrictParsing />
+    },
+    {
+      title: "Month Picker",
+      component: <MonthPicker />
     }
   ];
 

docs-site/src/example_components.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+
+export default class MonthPicker extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      startDate: new Date()
+    };
+  }
+
+  handleChange = date => {
+    this.setState({
+      startDate: date
+    });
+  };
+
+  render() {
+    return (
+      <div className="row">
+        <pre className="column example__code">
+          <code className="jsx">
+            {`
+<DatePicker
+    selected={this.state.startDate}
+    onChange={this.handleChange}
+    dateFormat="MM/yyyy"
+    showMonthYearPicker
+/>
+`}
+          </code>
+        </pre>
+        <div className="column">
+          <DatePicker
+            selected={this.state.startDate}
+            onChange={this.handleChange}
+            dateFormat="MM/yyyy"
+            showMonthYearPicker
+          />
+        </div>
+      </div>
+    );
+  }
+}

docs-site/src/examples/month_picker.jsx

@@ -168,7 +168,8 @@
 }
 
 .react-datepicker__current-month,
-.react-datepicker-time__header {
+.react-datepicker-time__header,
+.react-datepicker-year-header {
   margin-top: 0;
   color: #000;
   font-weight: bold;
@@ -254,6 +255,10 @@
   margin: 0.4rem;
   text-align: center;
 }
+.react-datepicker__month .react-datepicker__month-text {
+  display: inline-block;
+  width: 4rem;
+}
 
 .react-datepicker__input-time-container {
   clear: both;
@@ -423,63 +428,82 @@
   margin: 0.166rem;
 }
 
-.react-datepicker__day {
+.react-datepicker__day,
+.react-datepicker__month-text {
   cursor: pointer;
 }
-.react-datepicker__day:hover {
+.react-datepicker__day:hover,
+.react-datepicker__month-text:hover {
   border-radius: 0.3rem;
   background-color: #f0f0f0;
 }
-.react-datepicker__day--today {
+.react-datepicker__day--today,
+.react-datepicker__month-text--today {
   font-weight: bold;
 }
-.react-datepicker__day--highlighted {
+.react-datepicker__day--highlighted,
+.react-datepicker__month-text--highlighted {
   border-radius: 0.3rem;
   background-color: #3dcc4a;
   color: #fff;
 }
-.react-datepicker__day--highlighted:hover {
+.react-datepicker__day--highlighted:hover,
+.react-datepicker__month-text--highlighted:hover {
   background-color: #32be3f;
 }
-.react-datepicker__day--highlighted-custom-1 {
+.react-datepicker__day--highlighted-custom-1,
+.react-datepicker__month-text--highlighted-custom-1 {
   color: magenta;
 }
-.react-datepicker__day--highlighted-custom-2 {
+.react-datepicker__day--highlighted-custom-2,
+.react-datepicker__month-text--highlighted-custom-2 {
   color: green;
 }
 .react-datepicker__day--selected,
 .react-datepicker__day--in-selecting-range,
-.react-datepicker__day--in-range {
+.react-datepicker__day--in-range,
+.react-datepicker__month-text--selected,
+.react-datepicker__month-text--in-selecting-range,
+.react-datepicker__month-text--in-range {
   border-radius: 0.3rem;
   background-color: #216ba5;
   color: #fff;
 }
 .react-datepicker__day--selected:hover,
 .react-datepicker__day--in-selecting-range:hover,
-.react-datepicker__day--in-range:hover {
+.react-datepicker__day--in-range:hover,
+.react-datepicker__month-text--selected:hover,
+.react-datepicker__month-text--in-selecting-range:hover,
+.react-datepicker__month-text--in-range:hover {
   background-color: #1d5d90;
 }
-.react-datepicker__day--keyboard-selected {
+.react-datepicker__day--keyboard-selected,
+.react-datepicker__month-text--keyboard-selected {
   border-radius: 0.3rem;
   background-color: #2a87d0;
   color: #fff;
 }
-.react-datepicker__day--keyboard-selected:hover {
+.react-datepicker__day--keyboard-selected:hover,
+.react-datepicker__month-text--keyboard-selected:hover {
   background-color: #1d5d90;
 }
-.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
+.react-datepicker__day--in-selecting-range,
+.react-datepicker__month-text--in-selecting-range {
   background-color: rgba(33, 107, 165, 0.5);
 }
+.react-datepicker__month--selecting-range .react-datepicker__day--in-range,
 .react-datepicker__month--selecting-range
-  .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
+  .react-datepicker__month-text--in-range {
   background-color: #f0f0f0;
   color: #000;
 }
-.react-datepicker__day--disabled {
+.react-datepicker__day--disabled,
+.react-datepicker__month-text--disabled {
   cursor: default;
   color: #ccc;
 }
-.react-datepicker__day--disabled:hover {
+.react-datepicker__day--disabled:hover,
+.react-datepicker__month-text--disabled:hover {
   background-color: transparent;
 }
 

docs-site/style.css

@@ -21,6 +21,8 @@ import {
   setYear,
   getYear,
   isBefore,
+  addYears,
+  subYears,
   isAfter,
   getFormattedWeekdayInLocale,
   getWeekdayShortInLocale,
@@ -84,6 +86,7 @@ export default class Calendar extends React.Component {
     onWeekSelect: PropTypes.func,
     showTimeSelect: PropTypes.bool,
     showTimeInput: PropTypes.bool,
+    showMonthYearPicker: PropTypes.bool,
     showTimeSelectOnly: PropTypes.bool,
     timeFormat: PropTypes.string,
     timeIntervals: PropTypes.number,
@@ -118,6 +121,8 @@ export default class Calendar extends React.Component {
     showDisabledMonthNavigation: PropTypes.bool,
     previousMonthButtonLabel: PropTypes.string,
     nextMonthButtonLabel: PropTypes.string,
+    previousYearButtonLabel: PropTypes.string,
+    nextYearButtonLabel: PropTypes.string,
     renderCustomHeader: PropTypes.func,
     renderDayContents: PropTypes.func,
     onDayMouseEnter: PropTypes.func,
@@ -131,6 +136,8 @@ export default class Calendar extends React.Component {
       monthSelectedIn: 0,
       forceShowMonthNavigation: false,
       timeCaption: "Time",
+      previousYearButtonLabel: "Previous Year",
+      nextYearButtonLabel: "Next Year",
       previousMonthButtonLabel: "Previous Month",
       nextMonthButtonLabel: "Next Month"
     };
@@ -322,7 +329,16 @@ export default class Calendar extends React.Component {
       : getWeekdayMinInLocale(day, locale);
   };
 
-  renderPreviousMonthButton = () => {
+  decreaseYear = () => {
+    this.setState(
+      {
+        date: subYears(this.state.date, 1)
+      },
+      () => this.handleYearChange(this.state.date)
+    );
+  };
+
+  renderPreviousButton = () => {
     if (this.props.renderCustomHeader) {
       return;
     }
@@ -348,6 +364,10 @@ export default class Calendar extends React.Component {
 
     let clickHandler = this.decreaseMonth;
 
+    if (this.props.showMonthYearPicker) {
+      clickHandler = this.decreaseYear;
+    }
+
     if (allPrevDaysDisabled && this.props.showDisabledMonthNavigation) {
       classes.push("react-datepicker__navigation--previous--disabled");
       clickHandler = null;
@@ -359,12 +379,23 @@ export default class Calendar extends React.Component {
         className={classes.join(" ")}
         onClick={clickHandler}
       >
-        {this.props.previousMonthButtonLabel}
+        {this.props.showMonthYearPicker
+          ? this.props.previousYearButtonLabel
+          : this.props.previousMonthButtonLabel}
       </button>
     );
   };
 
-  renderNextMonthButton = () => {
+  increaseYear = () => {
+    this.setState(
+      {
+        date: addYears(this.state.date, 1)
+      },
+      () => this.handleYearChange(this.state.date)
+    );
+  };
+
+  renderNextButton = () => {
     if (this.props.renderCustomHeader) {
       return;
     }
@@ -393,6 +424,10 @@ export default class Calendar extends React.Component {
 
     let clickHandler = this.increaseMonth;
 
+    if (this.props.showMonthYearPicker) {
+      clickHandler = this.increaseYear;
+    }
+
     if (allNextDaysDisabled && this.props.showDisabledMonthNavigation) {
       classes.push("react-datepicker__navigation--next--disabled");
       clickHandler = null;
@@ -404,7 +439,9 @@ export default class Calendar extends React.Component {
         className={classes.join(" ")}
         onClick={clickHandler}
       >
-        {this.props.nextMonthButtonLabel}
+        {this.props.showMonthYearPicker
+          ? this.props.nextYearButtonLabel
+          : this.props.nextMonthButtonLabel}
       </button>
     );
   };
@@ -551,6 +588,14 @@ export default class Calendar extends React.Component {
     );
   };
 
+  renderYearHeader = () => {
+    return (
+      <div className="react-datepicker__header react-datepicker-year-header">
+        {getYear(this.state.date)}
+      </div>
+    );
+  };
+
   renderMonths = () => {
     if (this.props.showTimeSelectOnly) {
       return;
@@ -569,10 +614,13 @@ export default class Calendar extends React.Component {
           }}
           className="react-datepicker__month-container"
         >
-          {this.props.renderCustomHeader
-            ? this.renderCustomHeader({ monthDate, i })
-            : this.renderDefaultHeader({ monthDate, i })}
+          {!this.props.showMonthYearPicker
+            ? this.props.renderCustomHeader
+              ? this.renderCustomHeader({ monthDate, i })
+              : this.renderDefaultHeader({ monthDate, i })
+            : this.renderYearHeader({ monthDate, i })}
           <Month
+            onChange={this.changeMonthYear}
             day={monthDate}
             dayClassName={this.props.dayClassName}
             onDayClick={this.handleDayClick}
@@ -603,6 +651,7 @@ export default class Calendar extends React.Component {
             shouldCloseOnSelect={this.props.shouldCloseOnSelect}
             renderDayContents={this.props.renderDayContents}
             disabledKeyboardNavigation={this.props.disabledKeyboardNavigation}
+            showMonthYearPicker={this.props.showMonthYearPicker}
           />
         </div>
       );
@@ -662,8 +711,8 @@ export default class Calendar extends React.Component {
           "react-datepicker--time-only": this.props.showTimeSelectOnly
         })}
       >
-        {this.renderPreviousMonthButton()}
-        {this.renderNextMonthButton()}
+        {this.renderPreviousButton()}
+        {this.renderNextButton()}
         {this.renderMonths()}
         {this.renderTodayButton()}
         {this.renderTimeSection()}