[DatePicker] Use DatePicker for ranged example min and max date selection

[aahan96]

Now the ranged examples use DatePicker for minDate and maxDate.

Closes issue #4009

• PR has tests / docs demo, and is linted.
• Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
• Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

[aahan96]

Now, we can use the DatePicker to select min and max dates.

[owencm]

Note to reviewers that this change affects the ranged DatePicker example and replaces the two text inputs that specify the range itself and replace them with date pickers.

Personally I'd use the name event (assuming that's what it actually is) or _ in the place of x in handleChangeMinDate = (x, date).

Otherwise, assuming the linting passes this looks like a reasonable change to me.

[nathanmarks]

@aahan96

@owencm 's suggestion to replace the x with event would be the idiomatic choice here 👍

[mbrookes]

@aahan96 - please also follow the PR template.

[oliviertassinari]

This could be undefined on browser that don't support Intl.

[oliviertassinari]

What about using https://github.com/callemall/material-ui/blob/master/src/DatePicker/dateUtils.js instead?

[aahan96]

@oliviertassinari Yeah, I just checked it and there was a mix match of both controlled and uncontrolled behaviors. So, for now, I have switched it toggled={this.state.autoOk}' as it has already been set tofalse` in the upper part of file.

@mbrookes @owencm @nathanmarks I have changed x to event as it makes more sense. I used x as it wasn't being used, but later realized that it can cause confusion and doesn't follow the code.

[aahan96]

@oliviertassinari Just wanted to check with the status of this pr. I have also added support for browsers that don't support the IntlLocales. Let me know if something needs to be changed 😃

[oliviertassinari]

@aahan96 That looks good from a code point of view. I will try it out 👍.

[mbrookes]

@aahan96 I appreciate you've gone to the trouble of making the displayed date look the same as the manual textfield that this replaces, but as this isn't a localisation example, I think the default ISO 8601 date is fine, and make the example code much simpler. 👍

[aahan96]

@mbrookes I removed the localization example and the dates are now displayed in default ISO 8601 format. Thanks for the advice 👍

[mbrookes]

@aahan96 Thanks for doing that.

Please could you also remove the default date from the first DatePicker? It makes it easier to see which one is the actual demo picker.

I can't decide whether the range-setting pickers should honor the toggles, but I guess it's harmless. 😄

[aahan96]

@mbrookes Done!

[mbrookes]

Thanks!

Please go ahead and squash, and 'reword' the base commit title to match the PR title, and I think we can merge. 👍

[oliviertassinari]

@aahan96 Thanks, that feel better now!
I'm wondering if 2 years between the min and the max isn't too much. E.g. I had to set 10 days to make sure it was working correctly.