Allow Year/month navigation

[rodryquintero]

This allows for a quick way to jump to another year or month without having to use the nav keys and go one month at a time.

Here is an example. Clicking on the year or month displays another dialog showing the years/months.

React DatePicker

[ljharb]

While I love the idea of direct yearly navigation, having one modally thing pop up over another seems horrifying to me.

[rodryquintero]

How about a dropdown.

[supnate]

+1 for year navigation. Birthday input is a case.

[themre]

year/month navigation seems to me very important. I wouldn't have additional popup, I would replace the existing popup content with years/months.

[madisvain]

I think that this is a very important feature also but the UX of this should not be a new pop up but rather open inside the same widget.

Something like this: http://eonasdan.github.io/bootstrap-datetimepicker/

This makes it easy to use and navigate between months / years.

[agupta93]

I had one doubt if we go by @madisvain suggestion which seems doable, we would need to create another component monthPicker which would render the month and year view right? @ljharb

[rodryquintero]

Seems like it. Btw, sorry for not working on my PR. Have not found the time to do it.

[agupta93]

@rodryquintero but we still need to finalize what kind of behaviour is desired right?

[rodryquintero]

I vote for the menu option. Easier to implement and more practical.

[agupta93]

@rodryquintero the example suggested by @madisvain seems doable and practical to me lets see what @ljharb and @majapw have to say about this

[infacq]

hi... is there already in implementation?

[englishtom]

+1 here. As @supnate says- it's a blocking issue for DoB use case.

[ljharb]

Please do not post "+1" comments - everywhere on Github, these add noise and do not add value. Please indicate your support with emojis on the original post.

I will delete all such comments now, and any further in the future. Thanks!

[infacq]

I think sometimes it's better to stick with html5 date component... just for this purpose

[ljharb]

Sadly the HTML5 date component does not style consistently across browsers and the experience is subpar.

[jtomaszewski]

I could maybe make a PR for this. What would be the desired UI/UX for it? maybe some example from other datepickers?

[ljharb]

@jtomaszewski I think that before a PR, that's the exact question we'd need to figure out.

[nmchaves]

@jtomaszewski @ljharb As a starting point, here's the Pikaday datepicker:

and after clicking on April:

Very simple year/month navigation. I think this approach would work well with react-dates. This way, we wouldn't need to alter the existing UI much. We'd just add a little space between month and year and insert the down arrows. Any thoughts or alternative UI/UX suggestions?

[ljharb]

My only concern there is having to style <select> - a dropdown should look like a dropdown at all times, not just be a "down arrow" tacked on.

[secretyouth]

Something like this would be nice.

I would assume the left/right arrows would move through each section.

[jvanderz22]

I needed to add this feature to use this on a project I'm working on, but for now have only had time to implement it with a basic <select> box. Would you accept a pull req with that functionality? It currently looks like this:

[secretyouth]

I wasn't happy with how this was progressing. So I made my own react date picker with month & year functionality. No range selection yet though.

https://github.com/secretyouth/react-datez

[fufjvnvnf]

Is there any progress on the change per year functionality? I desperately want to add it to my superset fork!

[sag1v]

Hi @ljharb @majapw , is there any in-progress PR regarding Year Navigation?

[majapw]

Hi @sag1v, we don't really want to support something that we haven't explored from a design/UX side. So I've been partnering with a designer at Airbnb to get some insight and hope to have something built in the near future.

[jbblanchet]

@majapw Thanks for the feedback.

I just want to point out that from a user perspective, the best experience I had for year/month selection was with https://uxsolutions.github.io/bootstrap-datepicker/, which does not implement it as drop-downs. One more option to consider :smile:

[dominiquejb]

+1 for @jbblanchet 's recommendation, that is the best experience for being able to pick years and months.

For picking a date of birth this is incredibly useful and was surprised that react-dates did not offer something similar

[BenSwennen]

I have created an implementation of year picker as followed:

Anyone interested? I can create a PR for this

[fufjvnvnf]

@BenSwennen This is awesome! A small suggestion might be that users might be more comfortable if you put buttons with the same step direction on the same side.

[mrmuhammadali]

Hi, Is there any way to hide arrow buttons on DateRangePicker? I'm enabling only last 30 days on Calendar so I dont need the navigation buttons. Thanks

[majapw]

Hi @mrmuhammadali, your question isn't really related to this issue. I think it would be more helpful if you opened a new issue for this or scoured the current issues to find one that is related to your question.

[onigoetz]

Hello @majapw, anything new on this ?

If you have some insight from your UX/Design team, we can propose a Pull Request with the functionality, this is a blocker for us for a birth-date input case.

My 2 cent: the best is a select or a simple field, as arrows like @BenSwennen proposed are pretty, but on a usability point of view, for someone born in 1960, it will require 57 clicks.

[hanselsen]

@BenSwennen I really like your solution. I am also looking for an alternative to change years fast. Please make a pull request for this.

[BenSwennen]

@hanselsen I created one, but unfortunately it didn't seem to get a lot of traction, so I removed it and kept it specific to our needs. I also struggled to find the time to get the tests to succeed and to get it to work properly. You can always help me if you want! https://github.com/airbnb/react-dates/pull/672

[hanselsen]

@BenSwennen I switched to react-datepicker and styled it, because it has more options and styling is not limited.

[sontek]

@BenSwennen I'm also very interested in what you implemented. Any chance we could get you to re-send your PR? :)

[sontek]

@secretyouth Your suggestion looks really nice, but I'd be happy with a PR from @jvanderz22 since he has already implemented it.

@majapw You have any luck with the designer you were partnering with?

[sontek]

@majapw @ljharb The use case for this is birthdays, anniversaries, etc. It is extremely painful to use react-dates for historical dates. I just need a quick way for people to switch years, I don't mind having them tab through 12 months. Just no 45 years and then 12 months :P

[majapw]

I have some designs, but realistically, since this is not a priority for us, I wouldn't be able to work on this until winter break (late December). If someone wants to tackle an initial prototype with the new react-with-styles framework that handles transition/animations between year navigation and works with keyboard navigation, I'd be happy to work on top of that.

Here are some of the ideas my designer was floating around:

[majapw]

We could call it a MonthYearPicker or something and it could build on top of the DayPicker, but separate the logic out of year navigation.

[trickreich]

Without this feature this library isn't usable for me. :/

[tkharuk]

Such a pity that a highly requested feature like this takes more than a year to be discussed.

[ljharb]

Weird, it’s almost as if the thing that determines maintainer’s personal availability isn’t “people want a feature”

[sontek]

@ljharb Maybe you have been burned by open source in the past and that is how you justified such a rude response, but hopefully I can clarify the frustration people are having and move this conversation back to something much more productive than sarcasm.

Everyone is very thankful for the work airbnb has done on this project so far and a lot of us have built our applications to depend on it. The feature we are requesting is the ability to use this picker in a historical context (birth dates, past events, etc) which is currently impossible to do.

No one has asked the maintainer's to spend your own personal availability to implement this feature. There have been multiple PRs and examples of how this could be implemented. What we were told by @majapw is nothing would be accepted until the Airbnb graphic designers took a look at it. To us (as outsiders) this meant that we should wait for airbnb to do work since the PRs submitted so far haven't received acceptance and we were told that this would continue to be the case.

All we need from the maintainer's of the this project is direction on what you are willing to accept so that one of us can send the PR. We've offered many options and just need you to OK one or implement it the way you want if that is how you want to do it.

Ignoring the feature because its not relevant to airbnb isn't really a great way to run an open source project who has MANY people willing to contribute.

[trickreich]

@sontek Thanks for this words! And in my opinion you are totally right 👍

[ljharb]

@sontek i was responding to https://github.com/airbnb/react-dates/issues/25#issuecomment-347831965, which was an exceedingly rude comment, and i think the sarcasm (towards that person only) was quite deserved.

The reasons for delaying on this feature have been made clear; it’s not that Airbnb has to do the work, it’s that the design has to be approved by our designers first - we have an obligation to provide the best UX, not just a working one. We’re not “ignoring the feature”, but neither is anyone entitled to get a feature added on a freely given project.

If you want to send a PR, https://github.com/airbnb/react-dates/issues/25#issuecomment-343056092 asks for exactly that:

If someone wants to tackle an initial prototype with the new react-with-styles framework that handles transition/animations between year navigation and works with keyboard navigation, I'd be happy to work on top of that.

Thanks for contributing!

[sontek]

Maybe there is a stop gap approach that could be documented as well. There is the renderCalendarInfo, could there be a way to use that to add our own dropdowns that change the current visible year/month until this can be implemented appropriately??

[tkharuk]

@ljharb I believe You are overthinking my comment. I said it is a pity that it takes years for a discussion, and that's it. I apologize if someone finds it rude or sarcastic, didn't mean to.

[timgivois]

what's the status of this issue?

[sontek]

@timgivois Are you asking us to summarize all the conversation above? Or do you have a specific question?