Add initialVisibleMonth fn prop to DayPicker

.istanbul.yml

@@ -11,6 +11,6 @@ instrumentation:
 check:
   global:
     statements: 89
-    branches: 70
+    branches: 69
     lines: 91
     functions: 79

README.md

@@ -108,6 +108,11 @@ By default, we do not show days from the previous month and the next month in th
   enableOutsideDays: PropTypes.bool
 ```
 
+`initialVisibleMonth` indicates the month that should be displayed initially when the calendar is first opened. The prop is a function that must return a Moment.js object. This function will be called the first time the user focuses on the `DateRangePicker`/`SingleDatePicker` inputs or when the `focused` prop is passed to the `DayPicker` component.
+```
+   initialVisibleMonth: PropTypes.func
+```
+
 **DayPicker presentation:**
 
 The `orientation` prop indicates whether months are stacked on top of each other or displayed side-by-side. You can import the `HORIZONTAL_ORIENTATION` and `VERTICAL_ORIENTATION` constants from `react-dates/constants`.

src/components/DateRangePicker.jsx

@@ -44,6 +44,7 @@ const defaultProps = {
   showClearDates: false,
   disabled: false,
   reopenPickerOnClearDates: false,
+  initialVisibleMonth: () => moment(),
 
   orientation: HORIZONTAL_ORIENTATION,
   withPortal: false,
@@ -330,6 +331,8 @@ export default class DateRangePicker extends React.Component {
       withPortal,
       withFullScreenPortal,
       enableOutsideDays,
+      initialVisibleMonth,
+      focusedInput,
     } = this.props;
 
     const modifiers = {
@@ -370,6 +373,8 @@ export default class DateRangePicker extends React.Component {
           onNextMonthClick={onNextMonthClick}
           monthFormat={monthFormat}
           withPortal={withPortal || withFullScreenPortal}
+          hidden={!focusedInput}
+          initialVisibleMonth={initialVisibleMonth}
           onOutsideClick={onOutsideClick}
         />
 

src/components/DayPicker.jsx

@@ -30,6 +30,8 @@ const propTypes = {
   modifiers: PropTypes.object,
   orientation: OrientationShape,
   withPortal: PropTypes.bool,
+  hidden: PropTypes.bool,
+  initialVisibleMonth: PropTypes.func,
   onDayClick: PropTypes.func,
   onDayMouseDown: PropTypes.func,
   onDayMouseUp: PropTypes.func,
@@ -52,6 +54,8 @@ const defaultProps = {
   modifiers: {},
   orientation: HORIZONTAL_ORIENTATION,
   withPortal: false,
+  hidden: false,
+  initialVisibleMonth: () => moment(),
   onDayClick() {},
   onDayMouseDown() {},
   onDayMouseUp() {},
@@ -71,8 +75,10 @@ const defaultProps = {
 export default class DayPicker extends React.Component {
   constructor(props) {
     super(props);
+
+    this.hasSetInitialVisibleMonth = !props.hidden;
     this.state = {
-      currentMonth: moment(),
+      currentMonth: props.hidden ? moment() : props.initialVisibleMonth(),
       monthTransition: null,
       translationValue: 0,
     };
@@ -89,6 +95,15 @@ export default class DayPicker extends React.Component {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (!this.hasSetInitialVisibleMonth && !nextProps.hidden) {
+      this.hasSetInitialVisibleMonth = true;
+      this.setState({
+        currentMonth: nextProps.initialVisibleMonth(),
+      });
+    }
+  }
+
   shouldComponentUpdate(nextProps, nextState) {
     return shallowCompare(this, nextProps, nextState);
   }

src/components/SingleDatePicker.jsx

@@ -38,6 +38,8 @@ const defaultProps = {
   orientation: HORIZONTAL_ORIENTATION,
   withPortal: false,
   withFullScreenPortal: false,
+  initialVisibleMonth: () => moment(),
+
 
   onPrevMonthClick() {},
   onNextMonthClick() {},
@@ -181,6 +183,8 @@ export default class SingleDatePicker extends React.Component {
       onNextMonthClick,
       withPortal,
       withFullScreenPortal,
+      focused,
+      initialVisibleMonth,
     } = this.props;
 
     const modifiers = {
@@ -209,6 +213,8 @@ export default class SingleDatePicker extends React.Component {
           onNextMonthClick={onNextMonthClick}
           monthFormat={monthFormat}
           withPortal={withPortal || withFullScreenPortal}
+          hidden={!focused}
+          initialVisibleMonth={initialVisibleMonth}
           onOutsideClick={onOutsideClick}
         />
 

src/shapes/DateRangePickerShape.js

@@ -28,6 +28,7 @@ export default {
   endDateId: PropTypes.string,
   endDatePlaceholderText: PropTypes.string,
 
+  initialVisibleMonth: PropTypes.func,
   onDatesChange: PropTypes.func,
   onFocusChange: PropTypes.func,
   onPrevMonthClick: PropTypes.func,

src/shapes/SingleDatePickerShape.js

@@ -18,6 +18,7 @@ export default {
   enableOutsideDays: PropTypes.bool,
   numberOfMonths: PropTypes.number,
   orientation: OrientationShape,
+  initialVisibleMonth: PropTypes.func,
 
   // portal options
   withPortal: PropTypes.bool,

stories/DateRangePicker.js

@@ -103,6 +103,11 @@ storiesOf('DateRangePicker', module)
       isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
     />
   ))
+  .add('with month specified on open', () => (
+    <DateRangePickerWrapper
+      initialVisibleMonth={() => moment('01 2017', 'MM YYYY')}
+    />
+  ))
   .add('blocks fridays', () => (
     <DateRangePickerWrapper
       isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}

stories/SingleDatePicker.js

@@ -34,6 +34,11 @@ storiesOf('SingleDatePicker', module)
       withFullScreenPortal
     />
   ))
+  .add('with month specified on open', () => (
+    <SingleDatePickerWrapper
+      initialVisibleMonth={() => moment('01 2017', 'MM YYYY')}
+    />
+  ))
   .add('non-english locale', () => {
     moment.locale('zh-cn');
     return (