month/year select - Githubissues

MikaelEdebro / vue-airbnb-style-datepicker

A VueJs datepicker with a similar look and functionality as the popular AirBnb datepicker.

https://mikaeledebro.gitbooks.io/vue-airbnb-style-datepicker/

MIT License

505 stars 105 forks source link

month/year select #67

Closed coleww closed 5 years ago

coleww commented 5 years ago

Implements #40 and also fixes 2 accessibility bugs on ie11/edge/mobile devices

creates resize-select directive, which is used to ensure that the month/year select dropdowns are the correct width (usually, select dropdowns default to being as wide as their widest option, this directive makes them as wide as the currently selected option)
adds showMonthYearSelect and yearsForSelect props

bugfixes

fixes accessibility keyboard trap logic in ie11 (Object.values is not supported in ie11)
adds a timeout to setFocusedDate in order to fix focus logic across devices (before, focus was being applied inconsistently on mobile as well as ie11/edge)

MikaelEdebro commented 5 years ago

Nice work! I'll review this hopefully tonight or tomorrow.

MikaelEdebro commented 5 years ago

Nice implementation! Found an issue though. Please have a look at the GIF: https://imgur.com/bhdZ1Vo

coleww commented 5 years ago

what is the bug in the gif? and what params are you setting up the datepicker with?
I set the select logic up so that if minDate/endDate are set, the user cannot select a month/year combo that does not contain any valid dates, which seems to be the behavior shown in that gif

MikaelEdebro commented 5 years ago

Ahh, ok now I understand the issue. I tested this by enabling it on "Range datepicker with input" in /dev/App.vue. And this one has :min-date="'2018-08-28'". And in the GIF, I'm selecting 2019, and May. So you are right, it's logical that I cant switch to 2018-05.

Intuitively (at least for me), would be the following: min-date="2018-08-28" Select "2019 May" in dropdowns 2018 should still be enabled, but if I choose that, month changes from "May" to first allowed set by min-date (Aug).

Not a must have, but at least in my opinion this would make for a smoother user experience. I can imagine that some users might not understand that they first have to change month to a month later than min-date, and then change year.

Your thoughts on this?

coleww commented 5 years ago

That makes sense to me. I'll update the PR so that the years don't get disabled if they contain any available dates

coleww commented 5 years ago

@MikaelEdebro pushed a commit that removes the year disabling logic. the way generateYears works, it should only ever make year options that have dates within the minDate/endDate range.

MikaelEdebro commented 5 years ago

Awesome! I'll create a release as soon as possible. I just need to include another fix. Probably this weekend.

Thanks for the contribution @coleww !