date-picker size changes result in mis-clicks and slowed navigation

[Alys]

This is suggestion-discussion for the staff to decide if a fix is desired.

As reported by @Nakonana:

"The calender modal changes its size depending on how many days/weeks there are in a month (see screenshot below). It's kind of minor, but if you use the left/right arrow to skip 1-2 months, you can't do that quickly because you have to adjust the position of the mouse for each month to not accidentally pick a date."

I've noticed this myself. When moving forward more than a couple of months, I always do mis-clicks, which slows down the process.

[Tressley]

This is partially caused by the date-picker always opening from the bottom. Since @negue worked on this last, I'll bring him into the conversation.

@negue -- Is it possible to have the date-picker open from the top or bottom, based on the user's available space?

[negue]

This datepicker component is already outdated and we only have our own version of that - which only added some more classes but thats it. I don't think there is an automatic option for that.

I could try - when the picker has to be opened - to check the current picker input position if its under / over 50% of the page show it where more space is.

But it reads like that I has to switch the position while changing the data inside?

If so, wouldn't a randomly appearing picker (at the top or at the bottom on the input, while changing the month) confuse even more people than it does right now?

[Tressley]

If so, wouldn't a randomly appearing picker (at the top or at the bottom on the input, while changing the month) confuse even more people than it does right now?

@negue -- This is how our dropdowns work now. It opens below by default unless there isn't enough screen space. See edit modal task dropdowns.

[negue]

If so, wouldn't a randomly appearing picker (at the top or at the bottom on the input, while changing the month) confuse even more people than it does right now?

@negue -- This is how our dropdowns work now. It opens below by default unless there isn't enough screen space. See edit modal task dropdowns.

@Tressley

What I meant with this was, if you opened the datepicker - then changed the month -> should it also switch depending on the available screen size (and dialog size) to the other direction? Or does it only have to checked (opened in one direction) on the first show of the datepicker-dropdown ?

The task dropdowns are built on bootstrap dropdowns, I need to check the datepicker one (if its also built on the bootstrap one) - but since its not working as the other dropdowns that probably have to be added in a hacky way like I mentioned with

I could try - when the picker has to be opened - to check the current picker input position if its under / over 50% of the page show it where more space is.

[Tressley]

Or does it only have to checked (opened in one direction) on the first show of the datepicker-dropdown ?

It should only be checked when it's first opened.

[negue]

I tried to change the direction of the datepicker by checking if the position is above or below the center of the current viewport. -> See changes in #13044 and the updated datepicker repo.

Sadly it only works for "normal" places of the datepicker if it is only in a page this works.

If it is in our bootstrap modals it can't get the scroll / viewport correct which endup opening the datepicker always below.

Currently we have 3 choices ( I think)

1. leave the current way and let it open above (or change it to open always below)
2. invest more time trying to somehow get the modals viewport / scroll?
3. look for an alternative picker which has this feature already in it / or is based on (v-)bootstrap itself

[Nakonana]

Not a coder myself, so feel free to ignore if it doesn't make sense, but I was wondering if making the date picker have a fixed size by default (to fit 6 weeks, as this should cover all possibilities) no matter the actual number of weeks in a particular month would be an easy to implement way to fix the issue? I'm not sure it would always "look" nice because some months would have up to two blank rows but at least it would increase the usability.

Just a thought

[Tressley]

Not a bad idea @Nakonana. Since we don't have a ton of control over the datepicker without over-hacking, let's investigate and see if we're able to add another row to account for this usecase.

@negue -- Is it possible to have the last row show even if there isn't a date in it?

[Bokoness]

Hey, can take this issue?

[CuriousMagpie]

Hey @Bokoness! Thanks for your interest in contributing to all these issues! This one is still under discussion, so it's not assignable.