React-dates: Disable preNav and nextPav

[vget98]

Hi is it possible to disabled the prevNav and nextNav buttons when reaching the end of allowed dates? For example isOutsideRange disables days after September, is it possible for when a user reaches September to disable nextNav so they can't scroll past it?

[jseminck]

I recently solved this issue by using:

1/ Use onNextMonthClick and onPrevMonthClick to keep track of the current month.
2/ Use the current month to decide whether or not to render a navNext or navPrev

[vget98]

Do you not render the navNext or navPrev? I just wanted to disable the nav buttons so make it so it is not clickable but still there.

[jseminck]

You can create custom buttons and put disabled on them when they shouldn't be clickable. I chose not to render them at all.

I'm not sure if you can do it with the buttons that come with the library.

[vget98]

Ahh ok thats pretty much all I needed, thank you for the help

[laurenz-glueck]

@jseminck I tried the following:

navPrev={
    <button className={'MyCustomButton'} hidden={true}>
        'Prev'
    </button>
}
navNext={
    <button className={'MyCustomButton'}>
        'Next'
    </button>
}

But I'm unable to set the hole button (only the inside), so I can't disable or hide it:

[nosecoolie]

In case anyone want to disable preNav and nextNav, here is my work arround

You can use onPrevMonthClick & onNextMonthClick these two props.
And pass a function like this.

checkMonthAvailability = month => {
  ...
  const prevBtn = document.getElementsByClassName('DayPickerNavigation_button')[0]
  const nextBtn = document.getElementsByClassName('DayPickerNavigation_button')[1]
  // Use the prevBtn.style.display = 'none' or 'block' to controll the navBtn
}

[mlg87]

i feel like this should be reopened bc not rendering or rendering a completely different component when the desired outcome is a disabled button feels like a hacky workaround. it would be great to be able to pass down the click handler or prevent propagation when desired

[elinskytap]

@mlg87 Is it something you are looking for? https://github.com/airbnb/react-dates/pull/1311

[mlg87]

@elinskytap that is exactly what im looking for. now for it to get merged/released

[elinskytap]

yes, I am looking forward to the PR #1311 being merged & released!

[meghnaraju]

Hey i had an urgent question. I am trying to click a button when using date picker.. but instead of the on click of the button, the focus out of the input text box gets triggered and my click is not getting triggered. Any help would be very much appreciated.

[bdrazen]

The solution in that PR doesn't work for SingleDatePicker.

[constnazarenko]

The only working solution for this issue I found so far is to use "onNextMonthClick" and "onPrevMonthClick" to track currently opened month, then set classNames when needed, and remove buttons by css like so:

.nav-prev-month-unavailable .DayPickerNavigation .DayPickerNavigation_button:first-child, .nav-next-month-unavailable .DayPickerNavigation .DayPickerNavigation_button:last-child { display: none; }

[gokulramkul]

Hi guys,
I found a solution to hide/unhide next button on the calendar.

<SingleDatePicker navNext={this.state.isCalendarNextButtonDisabled ? <div hidden="true">Next</div> : ''} onNextMonthClick={this.onNextMonthClick} ... /> onNextMonthClick = (month) => { if (month.month() === 5) { this.setState({ isCalendarNextButtonDisabled: true, }); } };
//If the month reaches Jun then the next button will be hidden.