Feature/add full month name flag for month picker (#2100)

docs-site/src/components/Examples/index.js

@@ -63,6 +63,7 @@ import RenderCustomDay from "../../examples/renderCustomDay";
 import TimeInput from "../../examples/timeInput";
 import StrictParsing from "../../examples/strictParsing";
 import MonthPicker from "../../examples/monthPicker";
+import monthPickerFullName from "../../examples/monthPickerFullName";
 import RangeMonthPicker from "../../examples/rangeMonthPicker";
 import QuarterPicker from "../../examples/quarterPicker";
 import RangeQuarterPicker from "../../examples/rangeQuarterPicker";
@@ -319,6 +320,10 @@ export default class exampleComponents extends React.Component {
       title: "Month Picker",
       component: MonthPicker
     },
+    {
+      title: "Month Picker with Full Name",
+      component: monthPickerFullName
+    },
     {
       title: "Range Month Picker",
       component: RangeMonthPicker

docs-site/src/examples/monthPickerFullName.js

@@ -0,0 +1,12 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={date => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      showMonthYearPicker
+      showFullMonthYearPicker
+    />
+  );
+};

src/calendar.jsx

@@ -110,6 +110,7 @@ export default class Calendar extends React.Component {
     showTimeSelect: PropTypes.bool,
     showTimeInput: PropTypes.bool,
     showMonthYearPicker: PropTypes.bool,
+    showFullMonthYearPicker: PropTypes.bool,
     showQuarterYearPicker: PropTypes.bool,
     showTimeSelectOnly: PropTypes.bool,
     timeFormat: PropTypes.string,
@@ -723,6 +724,7 @@ export default class Calendar extends React.Component {
             renderDayContents={this.props.renderDayContents}
             disabledKeyboardNavigation={this.props.disabledKeyboardNavigation}
             showMonthYearPicker={this.props.showMonthYearPicker}
+            showFullMonthYearPicker={this.props.showFullMonthYearPicker}
             showQuarterYearPicker={this.props.showQuarterYearPicker}
             isInputFocused={this.props.isInputFocused}
             containerRef={this.containerRef}

src/index.jsx

@@ -89,6 +89,7 @@ export default class DatePicker extends React.Component {
       showTimeInput: false,
       showPreviousMonths: false,
       showMonthYearPicker: false,
+      showFullMonthYearPicker: false,
       showQuarterYearPicker: false,
       strictParsing: false,
       timeIntervals: 30,
@@ -208,6 +209,7 @@ export default class DatePicker extends React.Component {
     shouldCloseOnSelect: PropTypes.bool,
     showTimeInput: PropTypes.bool,
     showMonthYearPicker: PropTypes.bool,
+    showFullMonthYearPicker: PropTypes.bool,
     showQuarterYearPicker: PropTypes.bool,
     showTimeSelect: PropTypes.bool,
     showTimeSelectOnly: PropTypes.bool,
@@ -793,6 +795,7 @@ export default class DatePicker extends React.Component {
         onMonthMouseLeave={this.props.onMonthMouseLeave}
         showTimeInput={this.props.showTimeInput}
         showMonthYearPicker={this.props.showMonthYearPicker}
+        showFullMonthYearPicker={this.props.showFullMonthYearPicker}
         showQuarterYearPicker={this.props.showQuarterYearPicker}
         showPopperArrow={this.props.showPopperArrow}
         excludeScrollbar={this.props.excludeScrollbar}

src/month.jsx

@@ -45,6 +45,7 @@ export default class Month extends React.Component {
     shouldCloseOnSelect: PropTypes.bool,
     renderDayContents: PropTypes.func,
     showMonthYearPicker: PropTypes.bool,
+    showFullMonthYearPicker: PropTypes.bool,
     showQuarterYearPicker: PropTypes.bool,
     handleOnKeyDown: PropTypes.func,
     isInputFocused: PropTypes.bool,
@@ -250,6 +251,7 @@ export default class Month extends React.Component {
   };
 
   renderMonths = () => {
+    const { showFullMonthYearPicker, locale } = this.props;
     const months = [
       [0, 1, 2],
       [3, 4, 5],
@@ -266,7 +268,9 @@ export default class Month extends React.Component {
             }}
             className={this.getMonthClassNames(m)}
           >
-            {utils.getMonthShortInLocale(m, this.props.locale)}
+            {showFullMonthYearPicker
+              ? utils.getMonthInLocale(m, locale)
+              : utils.getMonthShortInLocale(m, locale)}
           </div>
         ))}
       </div>