Dynamic change default date for Calendar

[DavidCasillasRivero]

I'm trying to dinamically change the default date a calendar opens at in a DateTimePicker based on the value of other one.

If the first DateTimePicker changes its value and the second DateTimePicker is null then the second DateTimePicker must have the value of the first as a default value for opening the calendar. For example if 2020-01-01 is set in the first input and the second is null, when opening the calendar for the second input the month displayed must be January.

First try:

    <DateTimePicker
      value={value}
      defaultCurrentDate={value ? undefined : somePassedCurrentDate}
      onCurrentDateChange={a => console.debug(a)}
      views={['month', 'year']}
    />

This does not update the currentDate property whenever the defaultCurrentDate property changes. The calendar always opens in todays month.

Second try:

    <DateTimePicker
      value={value}
      currentDate={value ? undefined : somePassedCurrentDate}
      onCurrentDateChange={a => console.debug(a)}
      views={['month', 'year']}
    />

This works, and when the input is empty the default current date is updated and the calendar opens in the correct month passed to currentDate property. But then the calendar is unable to change the month. Whenever the user clicks in the calendar's before or after month buttons the onCurrentDateChange is triggered with the correct value, but the calendar does not change the month view to move to the correct month. You can only select a day in the visible month. Inspecting the control with React developer tools confirms that the inner currentDate property is not changed at all.

I have read this very old issue that seems fixed: #593, and also this but did not offer any solution for me: #733. This very very old one also seems related, but there is no clear solution proposed that I could understand: #32.

What is the correct way to dinalically set an empty DateTimePicker default date for the calendar?

[jquense]

These props are controlled which means that if you use currentDate you also need to make sure that own the state and update it via onCurrentDateChange otherwise it will be fully static, e.g. it will only ever be what you pass to currentDate it works just like value and onChange in React for inputs

[DavidCasillasRivero]

Thanks for your help, after some trial and error I could make it work, but I feel that some clarification is needed in the docs about this subject, there is just a brief description of the currentDate and onCurrentDateChange properties, and for defaultCurrentDate there is just the name. I spend many time trying to fit all the pieces together and I could not make it work my own, but maybe I'm not the most talented guy out there ... Keep this issue closed anyway.

[jquense]

There is a whole page on it here: http://jquense.github.io/react-widgets/controllables/ and each controllable prop notes that it is controllable like this:

maybe each should also have a link to the controlled page?

[DavidCasillasRivero]

I don't know how I missed that page, maybe I was a bit obfuscated. But a link to it whenever a controlled property is documented would be fine and would help some folks like me. Anyway thanks for that great piece of software.