DatePicker month selector not working when minDate in current month

[izziaraffaele]

If the minDate set on the DatePicker is in the current month when I open the DatePicker dialog and I change months, the back button is broken and I cannot go back to the previous month.

[yulric]

Yeah I'm seeing this also, I'll take a look at it and try to see what's happening.

[izziaraffaele]

It might be related with #1737

[onchainguy-btc]

+1

[ansgarm]

+1

[yulric]

So I believe the problem is with the following lines of code https://github.com/callemall/material-ui/blob/master/src/date-picker/calendar.jsx#L263-L264.

The prevMonth and nextMonth fields decide if the buttons next to the current month are enabled or not. If you use this.state.selectedDate then when the selectedDate is before the minDate the prev month button is always disabled. If you use dialogDate instead of selectedDate then the it all works well.

Does that make sense?

[moritzmann]

+1

[izziaraffaele]

Having a fast look at the code I think you should use displayDate if that is the piece of code that controls the month picker.

For what I can understand displayDate is the first day of the current displayed month so calculating the difference with the minDate you can understand if there are other pages to display after/before the current page.

[yulric]

sorry displayDate is right, I don't know why I said dialogDate. I'll start working on this and try to get it done before the weekend.

[shaurya947]

👍 @yulric looking forward to the fix

[yulric]

@shaurya947 Issues have been fixed in PR #1808 and #1796

[shaurya947]

@yulric I have merged #1808. Do we also need #1796?

[yulric]

Yeah, 1796 fixes the minDate issue whereas 1808 fixes the maxDate issue, sorry about that. I'll fix the merge conflicts in 1796.

[yulric]

@shaurya947 I fixed the merge conflicts for PR 1796. It can now be merged into master.

[shaurya947]

Done @yulric!

@izziaraffaele @seb0zz @ansgarm feel free to checkout the latest code from master and see if the issue has been resolved.

[yulric]

thanks @shaurya947

[nathando347]

Hi guys, is this fixed in v0.12.5 yet? I'm using v0.12.5 and this problem still there.
What's the quick fix for it without forking the whole source base?
Thanks

[yulric]

@nhantamdo this is supposed to be fixed. Can you give the your use case where it's not working? Thanks.

[nathando347]

Hi yulric,
If set minDate={new Date()}, and nagivate to next month (using > button), the < button still disabled. The only way to enable it was to click on some random date (on that next month page). After that the < button was enabled even for the months it was not supposed to be (months prior to minDate).
Hope this helps,

[yulric]

@nhantamdo When I set the minDate to the current date in the Ranged Date Picker example in the material-ui docs and open the DatePicker it seems to be woking correctly i.e. the previous month button is initially disabled and clicking on the next month button enables it. Could you try it here http://material-ui.com/#/components/date-picker and see if your use case still fails?

[nathando347]

@yulric I've tried to do exactly as in the example docs but the problem still there. Is the example using the lastest version? (v0.13.0). I'm using version v0.12.5 because meteor haven't updated react to v.0.14.0 yet.
Thanks,

[yulric]

@nhantamdo v0.12.5 has the fix for the issue. Have you made sure that you have v0.12.5? And if you do could you send me a code snippet with the problem so I can debug it on my end? Thanks.

[nathando347]

@yulric Thanks for your help. The problem was on my end. I updated material-ui to v.0.12.5 yesterday and somehow the old version still cached in meteor build. Great work guys !
BTW, can you shed some light on how to internationalize this DatePicker? I need to support another language.
Many thanks,

[yulric]

No problem. I'm not sure about the internationalize part unfortunately. @shaurya947 would have a better idea.

[shaurya947]

@nhantamdo regarding the internationalization part, @oliviertassinari is leading that effort #1658