if isValidDate is passed we need to verify if the view date is valid …

[JesseChrestler]

…before trying to render the component.

The calendar should only show a date that is selectable (based on isValidDate function)

Description

added some code to check isValidDate to change the viewDate to a date that can actually be selected.

Motivation and Context

My users were complaining that when there was a range that was disabled on the current month they would have to skip to the month where dates are selectable. This will now do this automatically.

Checklist

[ ] I have added tests covering my changes
[ ] All new and existing tests pass
[ ] My changes required the documentation to be updated
  [ ] I have updated the documentation accordingly
  [ ] I have updated the TypeScript 1.8 type definitions accordingly
  [ ] I have updated the TypeScript 2.0+ type definitions accordingly

[layneanderson]

Hi @JesseChrestler ,

I'm probably going to remove this on the next update. There is a problem with the code. If your isValidDate function doesn't allow dates in the future adding 1 day in the while loop will cause it to loop until it crashes. Can you think of any alternatives?

Reference issues #416 and #414

[JesseChrestler]

Ok, let me see what i can come up with.

[simeg]

Hey @JesseChrestler, thanks for your contribution. Too bad it's not working as intended. This sort of logic is sensitive, the component has complex internal state that needs consideration always. Having tests for changes like these are crucial, in my opinion.

@layneanderson Let's not deploy new version with this change, if it doesn't work. If we want to deploy we can always revert this commit first.

EDIT: Oh, I just realised it's already merged.

[JesseChrestler]

So I have been thinking of an alternative and I might have a way. This would eliminate the while loop and make it much faster. The downside is allowing another from props parameter. This parameter would let me set the date in which the calendar would render on the initial load. This different than setting the value as I want to have the calendar render any month given this parameter. This would work for both future and past dates.

Example

renderDate={moment().add('1' 'M')}

Will render the calendar one month in the future. This will satisfy my scenario as I would pass it my initial range of my IsValidDate function.

Let me know what you think of this strategy, I think it could have a lot uses outside of my specific case.

[JesseChrestler]

Also the name of the parameter needs to make sense. The other parameters like renderDay and renderMonth have different intentions and might make the API confusing. Maybe calling the parameter initialRenderDate might make it more clear.

[andreoman]

I ran next code on my side and it is not working and browser freezes:

const validBookDates = [moment("2017-04-18"), moment("2017-04-25")]
const valid = ( current ) => {
  return current.isSame(validBookDates)
}
...
<DateTime isValidDate={valid} />

the package version is: "react-datetime": "^2.10.2",

[layneanderson]

I've removed this code in v2.10.3 because it was causing crashes. Is there an original issue that we should reopen? I believe it would be good to check isValidDate before render, just not sure best way to implement that will satisfy all edge cases.

Thinking about this problem I think in a lot of cases it could be handled in the code using react-datetime (i.e. set value appropriately).

[andreoman]

I need to show only available dates.
I send request to receive availbale dates and want to set it for react-datetime. Is it possible or not ?

Thanks.

[simeg]

@andreoman Check the isValidDate prop, it should do the trick.

[andreoman]

@simeg Did you read my comment before ? I wrote that isValidDate does not work in my case.

[JesseChrestler]

@andreoman isValidDate prop only takes care of disabling dates, it doesn't effect what month is displayed first. I have a pull request which i need to fix so it can be approved. It basically let's you specify the month you want to display on initial load.