disable prev/next month nav if out of bounds

mui · Mar 8, 2018 · 90789c4 · 90789c4
1 parent da00ff9
commit 90789c4
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/lib/src/DatePicker/Calendar.jsx b/lib/src/DatePicker/Calendar.jsx
@@ -72,6 +72,24 @@ export class Calendar extends Component {
     );
   };
 
+  shouldDisablePrevMonth = () => {
+    const { utils, disablePast, minDate } = this.props;
+    const now = utils.date();
+    return !utils.isBefore(
+      utils.getStartOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate),
+      this.state.currentMonth,
+    );
+  };
+
+  shouldDisableNextMonth = () => {
+    const { utils, disableFuture, maxDate } = this.props;
+    const now = utils.date();
+    return !utils.isAfter(
+      utils.getStartOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate),
+      this.state.currentMonth,
+    );
+  };
+
   shouldDisableDate = (day) => {
     const {
       disablePast, disableFuture, shouldDisableDate, utils,
@@ -193,6 +211,8 @@ export class Calendar extends Component {
           onMonthChange={this.handleChangeMonth}
           leftArrowIcon={this.props.leftArrowIcon}
           rightArrowIcon={this.props.rightArrowIcon}
+          disablePrevMonth={this.shouldDisablePrevMonth()}
+          disableNextMonth={this.shouldDisableNextMonth()}
           utils={utils}
         />
 

diff --git a/lib/src/DatePicker/CalendarHeader.d.ts b/lib/src/DatePicker/CalendarHeader.d.ts
@@ -1,12 +1,14 @@
 import { ComponentClass, ReactNode } from 'react';
 import { Utils } from '../typings/utils';
-import { MaterialUiPickersDate } from '../typings/date'
+import { MaterialUiPickersDate } from '../typings/date';
 
 export interface CalendarHeaderProps {
     currentMonth: object;
     onMonthChange: (date: MaterialUiPickersDate) => void;
     leftArrowIcon?: ReactNode;
     rightArrowIcon?: ReactNode;
+    disablePrevMonth?: boolean;
+    disableNextMonth?: boolean;
     utils?: Utils;
 }
 

diff --git a/lib/src/DatePicker/CalendarHeader.jsx b/lib/src/DatePicker/CalendarHeader.jsx
@@ -14,6 +14,8 @@ export const CalendarHeader = (props) => {
     onMonthChange,
     leftArrowIcon,
     rightArrowIcon,
+    disablePrevMonth,
+    disableNextMonth,
     utils,
   } = props;
 
@@ -25,15 +27,15 @@ export const CalendarHeader = (props) => {
   return (
     <div>
       <div className={classes.switchHeader}>
-        <IconButton onClick={selectPreviousMonth}>
+        <IconButton disabled={disablePrevMonth} onClick={selectPreviousMonth}>
           <Icon>{rtl ? rightArrowIcon : leftArrowIcon}</Icon>
         </IconButton>
 
         <Typography variant="body1">
           {utils.getCalendarHeaderText(currentMonth)}
         </Typography>
 
-        <IconButton onClick={selectNextMonth}>
+        <IconButton disabled={disableNextMonth} onClick={selectNextMonth}>
           <Icon>{rtl ? leftArrowIcon : rightArrowIcon}</Icon>
         </IconButton>
       </div>
@@ -61,12 +63,16 @@ CalendarHeader.propTypes = {
   theme: PropTypes.object.isRequired,
   leftArrowIcon: PropTypes.node,
   rightArrowIcon: PropTypes.node,
+  disablePrevMonth: PropTypes.boolean,
+  disableNextMonth: PropTypes.boolean,
   utils: PropTypes.func.isRequired,
 };
 
 CalendarHeader.defaultProps = {
   leftArrowIcon: 'keyboard_arrow_left',
   rightArrowIcon: 'keyboard_arrow_right',
+  disablePrevMonth: false,
+  disableNextMonth: false,
 };
 
 const styles = theme => ({