ShortMonth on MonthDropdown (Hacker0x01#1186)

* ShortMonth on MonthDropdown

For this to work I added prop useShortMonthInDropdown in DatePicker & MonthDropdown components
Also added the function getMonthShortInLocale in date_utils and the conditional in Calendar component

Finally added a className for selected option on both Month & Year Dropdown selected option. This only for css customization, because can't format parent based on child options.

* Added ShortMonth for MonthDropdown

* Added missing prop useShortMonthInDropdown in Calendar

* Added Example Shor Month

* Added test for useShortMonthInDropdown prop

Author: marioramva

docs-site/src/example_components.jsx

@@ -24,6 +24,7 @@ import DateRange from './examples/date_range'
 import TabIndex from './examples/tab_index'
 import YearDropdown from './examples/year_dropdown'
 import MonthDropdown from './examples/month_dropdown'
+import MonthDropdownShort from './examples/month_dropdown_short'
 import YearSelectDropdown from './examples/year_select_dropdown'
 import Today from './examples/today'
 import TimeZoneDate from './examples/timezone_date'
@@ -168,6 +169,10 @@ export default class exampleComponents extends React.Component {
     title: 'Month dropdown',
     component: <MonthDropdown />
   },
+  {
+    title: 'Month dropdown short month',
+    component: <MonthDropdownShort />
+  },
   {
     title: 'Year select dropdown',
     component: <YearSelectDropdown />

docs-site/src/examples/month_dropdown_short.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import DatePicker from 'react-datepicker'
+import moment from 'moment'
+
+export default class MonthDropdownShort extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      startDate: moment()
+    }
+  }
+
+  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}
+    showMonthDropdown
+    useShortMonthInDropdown
+/>
+`}
+        </code>
+      </pre>
+      <div className="column">
+        <DatePicker
+          selected={this.state.startDate}
+          onChange={this.handleChange}
+          showMonthDropdown
+          useShortMonthInDropdown />
+      </div>
+    </div>
+  }
+}

src/calendar.jsx

@@ -95,7 +95,8 @@ export default class Calendar extends React.Component {
     utcOffset: PropTypes.number,
     weekLabel: PropTypes.string,
     yearDropdownItemNumber: PropTypes.number,
-    setOpen: PropTypes.func
+    setOpen: PropTypes.func,
+    useShortMonthInDropdown: PropTypes.bool
   };
 
   static get defaultProps() {
@@ -345,7 +346,8 @@ export default class Calendar extends React.Component {
         locale={this.props.locale}
         dateFormat={this.props.dateFormat}
         onChange={this.changeMonth}
-        month={getMonth(this.state.date)}/>
+        month={getMonth(this.state.date)}
+        useShortMonthInDropdown={this.props.useShortMonthInDropdown} />
     );
   };
 

src/date_utils.js

@@ -324,6 +324,10 @@ export function getMonthInLocale(locale, date, format) {
   return locale.months(date, format);
 }
 
+export function getMonthShortInLocale (locale, date) {
+  return locale.monthsShort(date)
+}
+
 // ** Utils for some components **
 
 export function isDayDisabled(

src/index.jsx

@@ -122,7 +122,8 @@ export default class DatePicker extends React.Component {
     timeIntervals: PropTypes.number,
     minTime: PropTypes.object,
     maxTime: PropTypes.object,
-    excludeTimes: PropTypes.array
+    excludeTimes: PropTypes.array,
+    useShortMonthInDropdown: PropTypes.bool
   };
 
   static get defaultProps() {
@@ -483,6 +484,7 @@ export default class DatePicker extends React.Component {
         inline={this.props.inline}
         peekNextMonth={this.props.peekNextMonth}
         showMonthDropdown={this.props.showMonthDropdown}
+        useShortMonthInDropdown={this.props.useShortMonthInDropdown}
         showWeekNumbers={this.props.showWeekNumbers}
         showYearDropdown={this.props.showYearDropdown}
         withPortal={this.props.withPortal}

src/month_dropdown.jsx

@@ -12,7 +12,8 @@ export default class MonthDropdown extends React.Component {
     locale: PropTypes.string,
     dateFormat: PropTypes.string.isRequired,
     month: PropTypes.number.isRequired,
-    onChange: PropTypes.func.isRequired
+    onChange: PropTypes.func.isRequired,
+    useShortMonthInDropdown: PropTypes.bool
   };
 
   state = {
@@ -79,14 +80,12 @@ export default class MonthDropdown extends React.Component {
       dropdownVisible: !this.state.dropdownVisible
     });
 
-  render() {
-    const localeData = utils.getLocaleDataForLocale(this.props.locale);
-    const monthNames = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(M =>
-      utils.getMonthInLocale(
-        localeData,
-        utils.newDate({ M }),
-        this.props.dateFormat
-      )
+  render () {
+    const localeData = utils.getLocaleDataForLocale(this.props.locale)
+    const monthNames = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
+      this.props.useShortMonthInDropdown
+        ? (M) => utils.getMonthShortInLocale(localeData, utils.newDate({M}))
+        : (M) => utils.getMonthInLocale(localeData, utils.newDate({M}), this.props.dateFormat)
     );
 
     let renderedDropdown;

src/month_dropdown_options.jsx

@@ -11,8 +11,7 @@ export default class MonthDropdownOptions extends React.Component {
 
   renderOptions = () => {
     return this.props.monthNames.map((month, i) => (
-      <div
-        className="react-datepicker__month-option"
+      <div className={this.props.month === i ? 'react-datepicker__month-option --selected_month' : 'react-datepicker__month-option'}
         key={month}
         ref={month}
         onClick={this.onChange.bind(this, i)}>

src/year_dropdown_options.jsx

@@ -54,8 +54,7 @@ export default class YearDropdownOptions extends React.Component {
   renderOptions = () => {
     var selectedYear = this.props.year;
     var options = this.state.yearsList.map(year => (
-      <div
-        className="react-datepicker__year-option"
+      <div className={selectedYear === year ? 'react-datepicker__year-option --selected_year' : 'react-datepicker__year-option'}
         key={year}
         ref={year}
         onClick={this.onChange.bind(this, year)}>

test/month_dropdown_test.js

@@ -160,6 +160,15 @@ describe("MonthDropdown", () => {
         "December"
       ]);
     });
+    // Short Month Names
+    it("renders month options with short name and default locale", () => {
+      monthDropdown = getMonthDropdown({dropdownMode: "select", useShortMonthInDropdown: true})
+      var options = monthDropdown.find("option")
+      expect(options.map(o => o.text())).to.eql([
+        "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
+      ]);
+    });
 
     // Failing on Travis CI.
     xit("renders month options with specified locale", () => {