React-day-picker: fromMonth not working as expected

[nealoke]

My code below is not influencing the fromMonth in any way. Is there a bug or am I doing it wrong?

Render function

    render() {
        const month = new Date();
        month.setMonth(month.getMonth() - 10);

        return (
            <DayPicker
                firstDayOfWeek={ 1 }
                onDayClick={ this.handleDayClick }
                selectedDays={ day => DateUtils.isDayInRange(day, { from: this.state.from, to: this.state.to }) }
                disabledDays={this.disabledDays}
                enableOutsideDays={true}
                fixedWeeks={true}
                numberOfMonths={this.props.numberOfMonths}
                toMonth={this.props.disableFuture ? new Date() : null}
                fromMonth={month}
            />
        );
    }

[nealoke]

For further information, when you navigate back and forth it works as expected

Wrong / unexpected
Initial render

Correct / expected
After hitting the previous button

[lsanwick]

@nealoke, you should specify initialMonth={month} as well. It defaults to the current month, but I'd argue that the default should be changed to the fromMonth

[gpbl]

Thanks for the suggestion @lsanwick!

I believe the calendar should always show the current month if the initialMonth is not specified, so to prevent confusion about its default behavior. E.g.: the current month is after the toMonth, should it display the fromMonth or the toMonth? I'd let the developer choose the behavior.

I'd add a note to the docs 👍

[nealoke]

@lsanwick using the initialMonth totally fixed my issue here.

@gpbl best to let the developer choose the behavior 👍

[nealoke]

@gpbl @lsanwick oh, I just saw that when using the initialMonth is causing the datepicker to stay fixed on the month. The arrows to navigate between months are showing but clicking them has no effect.

[gpbl]

@nealoke interesting – how does your code differs from http://react-day-picker.js.org/examples/?restricted ?

[nealoke]

@gpbl not much from what I can see :(

const month = new Date();
const initialMonth = disablePast ? new Date() : new Date(month.setMonth(month.getMonth() - 1));

<DayPicker
    fromMonth={disablePast ? new Date() : null}
    initialMonth={initialMonth}
    toMonth={disableFuture ? new Date() : null}
/>

[nealoke]

@gpbl Using this it works initialMonth={disableFuture ? new Date() : undefined}.

But when using the new Date(month.setMonth(month.getMonth() - 1) it breaks.

[nealoke]

@gpbl I can't figure out what is going wrong here, as soon as I return anything in the initialMonth it doesn't allow any navigation of months. Code below for reference.

Also using the example provided by you is not working if I copy the snippets covering the fromMonth, toMonth and initialMonth.

render() {
    const { type, disablePast, disableFuture } = this.props;
    const lastMonth = new moment().subtract(1, 'months').date(1);
    const initialMonth = disablePast ? new Date() : lastMonth.toDate();

    return (
        <div className='DATEPICKER_wrapper'>
            <div className='DATEPICKER_predefined'>
                {this._renderPrefinedPeriods()}
            </div>

            <DayPicker
                className='DATEPICKER_picker'
                firstDayOfWeek={ 1 }
                onDayClick={ this.handleDayClick }
                onDayMouseEnter={ this.handleDayMouseEnter }
                selectedDays={ day => DateUtils.isDayInRange(day, { from: this.state.from, to: this.state.to }) }
                disabledDays={this.disabledDays}
                enableOutsideDays={true}
                fixedWeeks={true}
                numberOfMonths={type == 'range' ? 2 : 1}
                initialMonth={initialMonth}
                fromMonth={disablePast ? new Date() : null}
                toMonth={disableFuture ? new Date() : null}
                modifiers={{
                    firstDay: day => DateUtils.isSameDay(day, this.state.from),
                    lastDay: day => DateUtils.isSameDay(day, this.state.to)
                }}
            />
        </div>
    );
}

react-day-picker v 3.1.1

[gpbl]

Also using the example provided by you is not working if I copy the snippets covering the fromMonth, toMonth and initialMonth.

@nealoke actually this code is working for me:

import React from 'react';
import DayPicker, { DateUtils } from 'react-day-picker';
import moment from 'moment';

import 'react-day-picker/lib/style.css';

export default function Restricted() {
  const type = 'range';
  const disablePast = false;
  const disableFuture = true;

  const lastMonth = new moment().subtract(1, 'months').date(1);
  const initialMonth = disablePast ? new Date() : lastMonth.toDate();

  return (
    <DayPicker
      firstDayOfWeek={ 1 }
      enableOutsideDays
      fixedWeeks
      numberOfMonths={ type === 'range' ? 2 : 1 }
      initialMonth={ initialMonth }
      fromMonth={ disablePast ? new Date() : null }
      toMonth={ disableFuture ? new Date() : null }
    />
  );
}

does the console show an error when clicking on the navigation arrows?

[nealoke]

@gpbl how weird. I also checked the props but they seem correct. The console is not giving any error on render nor when clicking the navigation arrows. Can it be that I have a different version of the package?

[gpbl]

@nealoke No I don't see how older versions would cause the issue.

My guess is that the container component is re-rendering again the calendar when changing the month - hence reinitializing the calendar when to its initial month. Could you investigate better the props passed down to it from the web inspector ? Or try to move it up the hierarchy to isolate the problem?

[gpbl]

Maybe these are related? https://github.com/gpbl/react-day-picker/issues/169 https://github.com/gpbl/react-day-picker/issues/232

[nealoke]

@gpbl further looking at the issue. Indeed the component re-renders when the date changes, otherwise the from and to don't get visualised on the datepicker right? :( Might be handy to integrate the initialMonth only when the component mounts?

[nealoke]

@gpbl i'm not sure why it is so difficult to achieve this :( might be that I'm thinking wrong here but don't you always have a wrapping component for the datepicker?

I've tried with reseting the initialMonth with each render (as suggested by #232) but this also means that when a user clicks on a date from the month on the left, that it moves it automatically to that month which is a no go for me, simply because the datepicker is used for a range of dates.

I'm basically out of ideas on how to solve this issue. Thanks for your kind help though! Let me know if you have any ideas

[gpbl]

@nealoke maybe you have been hit by this behavior which has been fixed in v4.
The latest version has few minor breaking changes so it should be easy to upgrade.
Could you please upgrade and report back if your issue has been resolved? Thanks!

[nealoke]

@gpbl upgrading seems to have resolved the issue! Thank you very much for the effort you've put in this issue (and component)! 👍

[gpbl]

Thanks to you for the patience 👌🏽