React-dates: Minimum and Max Dates on Single Date Picker

[andrefox333]

Question,

Is there a way to pass a min/max date value to the single date picker? I'd like the user to only select dates that are obviously not in the past or way in the future...

Nice plugin by the way :)

Thanks!

Andre

[ljharb]

@andrefox333 you can pass an isOutsideRange predicate function as a prop that can return true or false if the date is valid, which would allow you to restrict which dates are selectable.

[andrefox333]

@ljharb, thanks for your reply :), I'm having a couple issues with the predicate function. If I have two input fields (startDate, endDate), I'd like my endDate input to not be able to select anything past the startDate. Very similar to how the date picker range component works.

How does the isOutsideRange function know that the days from the startDate and before are not selectable?

I figured passing in the startDate into the function and do some checking with it would be enough but it's not working as intended. What should I be passing into the isOutsideRange function?

[ljharb]

If you want a start and end date linked like that, why not use the DateRangePicker?

[ljharb]

Either way, you can do it with your own wrapper component around two single date pickers, and that wrapper component would know onSelect/onChange what dates had been selected.

[majapw]

@ljharb is right. The SingleDatePicker you're using for your end date needs to use your current start date in the logic for isOutsideRange somehow, which means you need a wrapper for both instances that would know about both the selected startDate and endDate

[simonemonetti]

@andrefox333 just in case you still need it, I've submitted a PR that should solve your problem. Check it out -> #172

[andrefox333]

@simonemonetti Thank you :)