Merge pull request #266 from gpbl/month-prop

Add new month prop

docs/API.md

@@ -21,6 +21,7 @@
 | [locale](APIProps.md#locale) | en | `String` |
 | [localeUtils](APIProps.md#localeutils) | | `Object` |
 | [modifiers](APIProps.md#modifiers) | | `Object` of [modifiers](Modifiers.md) |
+| [month](APIProps.md#month) | | `Date` |
 | [months](APIProps.md#months) | | `Array<String>` |
 | [navbarElement](APIProps.md#navbarelement) | | `Element` |
 | [numberOfMonths](APIProps.md#numberofmonths) | 1 | `Number` |

docs/APIProps.md

@@ -1,5 +1,23 @@
 # Component props
 
+**Rendering months**: [initialMonth](#initialmonth), [month](#month), [fromMonth](#frommonth), [toMonth](#tomonth), [numberOfMonths](#numberofmonths), [pagedNavigation](#pagednavigation), [canChangeMonth](#canchangemonth), [reverseMonths](#reversemonths)
+
+**Day Modifiers**: [selectedDays](#selecteddays), [disabledDays](#diableddays), [modifiers](#modifiers)
+
+**Customization**: [enableOutsideDays](#enableoutsidedays), [fixedWeeks](#fixedweeks)
+
+**Localization**: [dir](#dir), [firstDayOfWeek](#firstdayofweek), [locale](#locale), [localeUtils](#localeUtils), [months](#months), [weekdaysLong](#weekdayslong), [weekdaysShort](#weekdaysshort)
+
+**CSS and HTML**: [className](#classname), [classNames](#classnames), [containerProps](#containerprops), [tabIndex](#tabindex)
+
+**Elements**: [renderDay](#renderday), [weekdayElement](#weekdayelement), [navbarElement](#navbarelement), [captionElement](#captionelement)
+
+**Events**: [onBlur](#onblur), [onCaptionClick](#oncaptionclick), [onDayClick](#ondayclick), [onDayFocus](#ondayfocus), [onDayKeyDown](#ondaykeydown), [onDayMouseEnter](#ondaymouseenter), [onDayMouseLeave](#ondaymouseleave), [onDayTouchEnd](#ondaytouchend), [onDayTouchStart](#ondaytouchstart), [onFocus](#onfocus), [onKeyDown](#onkeydown), [onMonthChange](#onmonthchange)
+
+---
+
+## Prop Reference
+
 ### canChangeMonth
 
 **Type**: `Bool` | **Default**: `true`
@@ -115,7 +133,7 @@ The first allowed month. Users won't be able to navigate or interact with the da
 
 **Type**: `Date` **Default**: The current month
 
-The month to display in the calendar. Default is the current month.
+The month to display in the calendar at first render. See also [`month`](#month) prop. Default is the current month. 
 
 ### locale
 
@@ -138,6 +156,12 @@ An object of [day modifiers](Modifiers.md).
 
 As default, the calendar adds `today` and `outside` modifiers. (_Outside days_ are the days appearing on the calendar but don't belonging to the current month).
 
+### month
+
+**Type**: `Date` **Default**: The current month
+
+The month to display in the calendar.
+
 ### months
 
 **Type**: `Array<String>` **Default**: `['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']`

examples/src/examples/YearNavigation.js

@@ -41,25 +41,23 @@ function YearMonthForm({ date, localeUtils, onChange }) {
 
 export default class YearNavigation extends React.Component {
 
-  state = {
-    initialMonth: fromMonth,
-  };
-
   constructor(props) {
     super(props);
     this.handleYearMonthChange = this.handleYearMonthChange.bind(this);
   }
 
+  state = {
+    month: fromMonth,
+  };
   handleYearMonthChange(month) {
-    this.daypicker.showMonth(month);
+    this.setState({ month });
   }
 
   render() {
     return (
       <div className="YearNavigation">
         <DayPicker
-          ref={ (el) => { this.daypicker = el; } }
-          initialMonth={ this.state.initialMonth }
+          month={ this.state.month }
           fromMonth={ fromMonth }
           toMonth={ toMonth }
           captionElement={

src/DayPicker.js

@@ -18,50 +18,64 @@ export default class DayPicker extends Component {
 
   static propTypes = {
 
-    classNames: PropTypes.shape({
-      body: PropTypes.string,
-      container: PropTypes.string,
-      interactionDisabled: PropTypes.string,
-      month: PropTypes.string,
-      navBar: PropTypes.string,
-      week: PropTypes.string,
-      outside: PropTypes.string.isRequired,
-      today: PropTypes.string.isRequired,
-      selected: PropTypes.string.isRequired,
-      disabled: PropTypes.string.isRequired,
-    }),
-
+    // Rendering months
     initialMonth: PropTypes.instanceOf(Date),
+    month: PropTypes.instanceOf(Date),
     numberOfMonths: PropTypes.number,
+    fromMonth: PropTypes.instanceOf(Date),
+    toMonth: PropTypes.instanceOf(Date),
+    canChangeMonth: PropTypes.bool,
+    reverseMonths: PropTypes.bool,
+    pagedNavigation: PropTypes.bool,
 
+    // Modifiers
     selectedDays: PropTypes.oneOfType([
       ModifierPropType,
       PropTypes.arrayOf(ModifierPropType),
     ]),
-
     disabledDays: PropTypes.oneOfType([
       ModifierPropType,
       PropTypes.arrayOf(ModifierPropType),
     ]),
-
     modifiers: PropTypes.object,
 
+    // Localization
+    dir: PropTypes.string,
+    firstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
     locale: PropTypes.string,
     localeUtils: DayPickerPropTypes.localeUtils,
+    months: PropTypes.arrayOf(PropTypes.string),
+    weekdaysLong: PropTypes.arrayOf(PropTypes.string),
+    weekdaysShort: PropTypes.arrayOf(PropTypes.string),
 
+    // Customization
     enableOutsideDays: PropTypes.bool,
     fixedWeeks: PropTypes.bool,
-    canChangeMonth: PropTypes.bool,
-    reverseMonths: PropTypes.bool,
-    pagedNavigation: PropTypes.bool,
-    fromMonth: PropTypes.instanceOf(Date),
-    toMonth: PropTypes.instanceOf(Date),
 
-    firstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
-    months: PropTypes.arrayOf(PropTypes.string),
-    weekdaysLong: PropTypes.arrayOf(PropTypes.string),
-    weekdaysShort: PropTypes.arrayOf(PropTypes.string),
+    // CSS and HTML
+    classNames: PropTypes.shape({
+      body: PropTypes.string,
+      container: PropTypes.string,
+      interactionDisabled: PropTypes.string,
+      month: PropTypes.string,
+      navBar: PropTypes.string,
+      week: PropTypes.string,
+      outside: PropTypes.string.isRequired,
+      today: PropTypes.string.isRequired,
+      selected: PropTypes.string.isRequired,
+      disabled: PropTypes.string.isRequired,
+    }),
+    className: PropTypes.string,
+    containerProps: PropTypes.object,
+    tabIndex: PropTypes.number,
+
+    // Custom elements
+    renderDay: PropTypes.func,
+    weekdayElement: PropTypes.element,
+    navbarElement: PropTypes.element,
+    captionElement: PropTypes.element,
 
+    // Events
     onBlur: PropTypes.func,
     onFocus: PropTypes.func,
     onKeyDown: PropTypes.func,
@@ -75,18 +89,6 @@ export default class DayPicker extends Component {
     onMonthChange: PropTypes.func,
     onCaptionClick: PropTypes.func,
 
-    renderDay: PropTypes.func,
-
-    weekdayElement: PropTypes.element,
-    navbarElement: PropTypes.element,
-    captionElement: PropTypes.element,
-
-    dir: PropTypes.string,
-    className: PropTypes.string,
-    tabIndex: PropTypes.number,
-
-    containerProps: PropTypes.object,
-
   };
 
   static defaultProps = {
@@ -121,8 +123,14 @@ export default class DayPicker extends Component {
     this.state = this.getStateFromProps(props);
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (this.props.month !== nextProps.month) {
+      this.setState(this.getStateFromProps(nextProps));
+    }
+  }
+
   getStateFromProps = (props) => {
-    const initialMonth = Helpers.startOfMonth(props.initialMonth);
+    const initialMonth = Helpers.startOfMonth(props.month || props.initialMonth);
     let currentMonth = initialMonth;
 
     if (props.pagedNavigation && props.numberOfMonths > 1 && props.fromMonth) {

test/daypicker/rendering.js

@@ -33,7 +33,7 @@ describe('DayPicker’s rendering', () => {
     expect(wrapper).to.have.attr('lang', 'en');
     expect(wrapper).to.have.className('DayPicker--interactionDisabled');
   });
-  it('should use initialMonth as the current month', () => {
+  it('should use `initialMonth` as the current month', () => {
     const wrapper = shallow(<DayPicker />);
     const instance = wrapper.instance();
     expect(instance.props.initialMonth.getFullYear())
@@ -43,6 +43,28 @@ describe('DayPicker’s rendering', () => {
     expect(instance.state.currentMonth.getDate())
       .to.equal(1);
   });
+  it('should use `month` as the current month instead of `initialMonth`', () => {
+    const wrapper = shallow(
+      <DayPicker
+        month={ new Date(2018, 10, 11) }
+        initialMonth={ new Date(2018, 1, 11) }
+      />);
+    const instance = wrapper.instance();
+    expect(instance.props.month.getFullYear())
+      .to.equal(instance.state.currentMonth.getFullYear());
+    expect(instance.props.month.getMonth())
+      .to.equal(instance.state.currentMonth.getMonth());
+    expect(instance.state.currentMonth.getDate())
+      .to.equal(1);
+  });
+  it('should update the current month when `month` is updated', () => {
+    const wrapper = mount(<DayPicker month={ new Date(2018, 10, 11) } />);
+    wrapper.setProps({ month: new Date(2016, 1, 15) });
+    const instance = wrapper.instance();
+    expect(instance.state.currentMonth.getFullYear()).to.equal(2016);
+    expect(instance.state.currentMonth.getMonth()).to.equal(1);
+    expect(instance.state.currentMonth.getDate()).to.equal(1);
+  });
   it('should render multiple months', () => {
     const wrapper = mount(<DayPicker numberOfMonths={ 12 } />);
     expect(wrapper.find('.DayPicker-Month')).to.have.length(12);