Material-ui: [DatePicker] Option to open in year selection mode

[jayalfredprufrock]

When building apps that use the date picker for choosing an old date like "birthday", I often hear complaints about it taking forever to go so far back in time. These people obviously don't realize they can select the year by clicking on the year in the title area. An option for just starting on the year picker though would make this component much more useful for such historic dates, especially for the less tech-savvy.

If not that, then perhaps it can be made a little more obvious that clicking on the year takes you to the year picker? An edit icon or something?

I'd be happy to make a pull request if others agree this would be a useful addition. Thanks!

[stephenkingsley]

I think this is not necessary. the date picker component is very beautiful now, and I think you can teach or send email for somebody who want to use you app. and I think people will click the button when they want to change.

[stephenkingsley]

If not that, then perhaps it can be made a little more obvious that clicking on the year takes you to the year picker? An edit icon or something?

@jayalfredprufrock do you meant this?

I think this is interesting, but not suit in this project.

[jayalfredprufrock]

Yeah that's what I meant by "year picker". Honestly, my first suggestion would be preferable and wouldn't mess with the design at all. The flow I'd like to achieve is this:

User clicks on datepicker. It immediately opens prompting the user to first select the year. After choosing the year, it automatically switches over to the month view and allows the user to select the month/day.

This would require one new option, say openToYearSelection.

Seems like this would greatly streamline the case where the date is likely to be far in the past so you know the user needs to change the year. Saves a few clicks and solves the problem of the user not knowing how to switch between the year and month views.

[stephenkingsley]

I had two idea.

I think you can fork a branch to do this, and publish npm.

I also think this will let mui become mess. and I think this case is a very small part. I think you can rewrite date picker in your own app. In you own date picker you can do anything what you want.

[davincho]

@jayalfredprufrock should be easy to make this option configurable: The option you are looking for is defined in https://github.com/callemall/material-ui/blob/ce25e5fbfdf974b75923006aef8c9859620e8b92/src/DatePicker/Calendar.js#L64

Introducing an option such as displayMode as enum with possible values month and year and considering them in componentWillMount and componentWillReceiveProps would do the trick.
@oliviertassinari what do you think? I could provide a PR and tests.

[aahan96]

@davincho Are you working on the PR?

[davincho]

@aahan96 no currently not. If you want to give it a shot go ahead 😉

[clayne11]

I second the idea of exposing a displayMode prop.

[jayalfredprufrock]

I'm not sure how this is considered a duplicate.

Is this being closed because nobody is currently working on this, or because it's not a feature the maintainers agree with? If it's the former, I think I could put together a PR next week.

Without the ability to open directly to the year selection screen I'm not sure I'll be able to use this for any dates < 1 year old. I've watched more than a dozen people use my app, and more than half spend so much time figuring out how to select their birthday from the datepicker that it becomes more of a hindrance than a convenience. The interaction normally goes like this:

1. User opens up datepicker
2. Starts clicking back arrow on the month and then quickly realizes that will take entirely too long.
3. Then they start clicking everywhere else and eventually land on the year picker.
4. They choose the year, and then click "OK". Whoops, datepicker closes.
5. Now they have to reopen it and select the month/day.

A displayMode prop would greatly improve this use case.

[oliviertassinari]

Introducing an option such as displayMode as enum with possible values month and year

@davincho I agree, that would be better to have an enum than an implicit boolean displayMonthDay=false than mean display the year mode.
Regarding exposing this property, that sounds like a good idea. Still, I'm not sure how to implement it.

• Would we be using the context to pass it down the tree?
• Would we expose a controlling property or just something for when we open the DatePicker dialog?

[davincho]

I would pass it the same as mode. I am going to prepare a PR.

[davincho]

One open point I still see is the ability to switch back automatically to month view as soon as a year is selected.

Edit: Don't know if an additional property such as autoSwitch should be introduced, or only a callback onYearSelected and the programmer afterwards has to take care of toggling displayMode to month. Any thoughts?

[clayne11]

I would like to see a callback. It's more flexible, just like using displayMode enum instead of a boolean showYearOnOpen. If you provide a callback then any possible use-case can be handled by the developer. If you only provide autoSwitch then you lose some flexibility.

A simple HOC could be added to the component to add in the autoSwitch functionality, but if you don't provide a callback then other use cases might be impossible to deal with.

[jayalfredprufrock]

@davincho

One open point I still see is the ability to switch back automatically to month view as soon as a year is selected.

I figured that would be the trickiest part. Perhaps this should be default behavior when autoOK option is true? I don't think I've ever used a datepicker to first choose a month/day (with the wrong year) only to choose the correct year afterwards -- just like most people would first choose the right month before selecting the day. Maybe I'm way off on this...

[davincho]

@clayne11 agreed! It's cleaner to expose a callback function. Minimizing the "black magic" happening behind the scenes ;)

[plumberrycustom]

Can I suggest here?
I think that toggle action is another good solution.
like this,

Tap DateDisplay one more, change to day selection mode.

(I'm not good at english, so I attach this pictures)

I think most users know that the year selector is somewhere.
but when they touch 'Wed May 13', nothing happened.
YearButton is too small and too far to finger in mobile.
I think that this toggle action is very intuitive.

[mimamuh]

Interesting! I stumbled upon the same ux problems like @jayalfredprufrock (described)[https://github.com/callemall/material-ui/issues/4949#issuecomment-240237470] when I used the calendar the first time.

In my opinion it would improve the ux too when the default behaviour would be:

1. Auto-switch to month when the user selected a year. Normally you search for a year and click on it. Currently it just selects the year but do not switch to month-view. In this case I also assumed the modal buttons "ok" and "cancel" points to my year-selection instead of the whole picker.
2. I would add a callback to the title of CalendarToolbar so when a user clicks the title it opens the year-selection too.
3. Make the whole display switchable like @plumberrycustom suggested - its a good idea and makes the whole picker more convenient.

[robertleeplummerjr]

Love it! PR it, and I'll thumb it!

[otajor]

+1 for this issue. Having to ditch the DatePicker for selecting users' birthdays for this exact reason.

Users (even tech-savvy developers) don't realise they can click on the year in the top left to go to year selection.

Would love a prop to open the DatePicker in year selection and then go to Month/Day view once year is selected.

[eric-burel]

Hi,
The DatePicker year selection is indeed counter intuitive (I might be slow but it took me like 5 whole minutes to get it). Here is another interesting solution : http://zippyui.com/docs/react-date-picker

It simply adds double arrows that change the year instead of the month.
It may be redundant with the year picker, but I think it is easy to understand for the user (and after all, redundancy is not always that bad in UX).

[donratta]

Hi Guys,
Great library btw. I kinda agree with what most of the guys are saying. I strongly recommend the feature suggested by @davincho about auto switching when a year has been selected and a month too. I have users clicking okay after they click the year thinking that it will take them to the month and day view 😢

[opvasger]

I would really like to have the datepicker have a configuration to make it start in year-selection. I think it is more than reasonable to have this integrated in the component API - I haven't found any documented way to achieve this so far...

[oliviertassinari]

Closed by #7367

[frankdavidcorona]

@oliviertassinari Any way for delete the step of select day and month and only select the year ?. Thanks.

[jjalonso]

Yeah, interested in selecting only a year, no month no day.