Merge pull request #206 from ydagana/feature/add-showMonthAndYearPick…

…ers-prop adding a prop to allow disabling the month and year selectors
hypeserver · May 24, 2018 · ea059b5 · ea059b5
2 parents ccee480 + 8769fa2
commit ea059b5
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -103,12 +103,13 @@ locale                               | Object    | enUS from locale | you can vi
 className                            | String    |                  | wrapper classname
 months                               | Number    | 1                | rendered month count
 showSelectionPreview                 | Boolean   | true             | show preview on focused/hovered dates
+showMonthAndYearPickers              | Boolean   | true             | show select tags for month and year on calendar top, if false it will just display the month and year
 rangeColors                          | String[]  |                  | defines color for selection preview.
 shownDate                            | Date      |                  | initial focus date
 minDate                              | Date      |                  | defines minimum date. Disabled earlier dates
 maxDate                              | Date      |                  | defines maximum date. Disabled later dates
 direction                            | String    | 'vertical'       | direction of calendar months. can be `vertical` or `horizontal`
-scroll                       				 | Object    | { enabled: false }| infinite scroll behaviour configuration. Check out [Infinite Scroll](#infinite-scrolled-mode) section 
+scroll                       				 | Object    | { enabled: false }| infinite scroll behaviour configuration. Check out [Infinite Scroll](#infinite-scrolled-mode) section
 showMonthArrow                       | Boolean   | true             | show/hide month arrow button
 navigatorRenderer                    | Func      |                  | renderer for focused date navigation area. fn(currentFocusedDate: Date, changeShownDate: func, props: object)
 ranges                               | *Object[] | []               | Defines ranges. array of range object
@@ -151,7 +152,7 @@ If you prefer, you can overwrite calendar sizes with `calendarWidth`/`calendarHe
 ```js
 	// shape of scroll prop
   scroll: {
-    enabled: PropTypes.bool, 
+    enabled: PropTypes.bool,
     monthHeight: PropTypes.number,
     longMonthHeight: PropTypes.number, // some months has 1 more row than others
     monthWidth: PropTypes.number, // just used when direction="horizontal"

diff --git a/src/components/Calendar.js b/src/components/Calendar.js
@@ -161,7 +161,7 @@ class Calendar extends PureComponent {
     }
   }
   renderMonthAndYear(focusedDate, changeShownDate, props) {
-    const { showMonthArrow, locale, minDate, maxDate } = props;
+    const { showMonthArrow, locale, minDate, maxDate, showMonthAndYearPickers } = props;
     const upperYearLimit = maxDate.getFullYear();
     const lowerYearLimit = minDate.getFullYear();
     const styles = this.styles;
@@ -175,34 +175,42 @@ class Calendar extends PureComponent {
             <i />
           </button>
         ) : null}
-        <span className={styles.monthAndYearPickers}>
-          <span className={styles.monthPicker}>
-            <select
-              value={focusedDate.getMonth()}
-              onChange={e => changeShownDate(e.target.value, 'setMonth')}>
-              {locale.localize.months().map((month, i) => (
-                <option key={i} value={i}>
-                  {month}
-                </option>
-              ))}
-            </select>
-          </span>
-          <span className={styles.monthAndYearDivider} />
-          <span className={styles.yearPicker}>
-            <select
-              value={focusedDate.getFullYear()}
-              onChange={e => changeShownDate(e.target.value, 'setYear')}>
-              {new Array(upperYearLimit - lowerYearLimit + 1).fill(upperYearLimit).map((val, i) => {
-                const year = val - i;
-                return (
-                  <option key={year} value={year}>
-                    {year}
+        {showMonthAndYearPickers ? (
+          <span className={styles.monthAndYearPickers}>
+            <span className={styles.monthPicker}>
+              <select
+                value={focusedDate.getMonth()}
+                onChange={e => changeShownDate(e.target.value, 'setMonth')}>
+                {locale.localize.months().map((month, i) => (
+                  <option key={i} value={i}>
+                    {month}
                   </option>
-                );
-              })}
-            </select>
+                ))}
+              </select>
+            </span>
+            <span className={styles.monthAndYearDivider} />
+            <span className={styles.yearPicker}>
+              <select
+                value={focusedDate.getFullYear()}
+                onChange={e => changeShownDate(e.target.value, 'setYear')}>
+                {new Array(upperYearLimit - lowerYearLimit + 1)
+                  .fill(upperYearLimit)
+                  .map((val, i) => {
+                    const year = val - i;
+                    return (
+                      <option key={year} value={year}>
+                        {year}
+                      </option>
+                    );
+                  })}
+              </select>
+            </span>
+          </span>
+        ) : (
+          <span className={styles.monthAndYearPickers}>
+            {locale.localize.months()[focusedDate.getMonth()]} {focusedDate.getFullYear()}
           </span>
-        </span>
+        )}
         {showMonthArrow ? (
           <button
             type="button"
@@ -447,6 +455,7 @@ class Calendar extends PureComponent {
 
 Calendar.defaultProps = {
   showMonthArrow: true,
+  showMonthAndYearPickers: true,
   classNames: {},
   locale: defaultLocale,
   ranges: [],
@@ -469,6 +478,7 @@ Calendar.defaultProps = {
 
 Calendar.propTypes = {
   showMonthArrow: PropTypes.bool,
+  showMonthAndYearPickers: PropTypes.bool,
   minDate: PropTypes.object,
   maxDate: PropTypes.object,
   date: PropTypes.object,