nextcloud-libraries / nextcloud-vue

🍱 Vue.js components for Nextcloud app development ✌ https://npmjs.org/@nextcloud/vue
https://nextcloud-vue-components.netlify.app/
Other
213 stars 84 forks source link

Second callendar pop up in date range selection is confusing. Many buttons, little feedback. #1893

Open TJ-shmt opened 3 years ago

TJ-shmt commented 3 years ago

What is going wrong?

Describe the bug Not a real bug but more a feeling when using the select range while creating a poll. When i ticked the option for select range, a second month would pop up. Therefore i was expecting i had to select the first date on the left (or upper month) and the second on the right (lower month). When selecting i noticed the range was huge, but I was unsure now if i had to select on the left or the right. So i went back a month on the top but then the first selection on the left would also jump a month back.

it took me a while to understand what was going on and how to select the month correctly.

To Reproduce Steps to reproduce the behavior:

  1. Creat a new Poll
  2. Add an option
  3. check "select range"
  4. pic the first date then select second on the right,
  5. or, pic first date and change month on the right.

Expected behavior When a second calendar opens up, I would expect i HAVE TO make the second date selection on the new one. (first screenshot) When noticing that I do not, I was expecting to be able to change the month on top individually without effecting the other. (3rd screenshot)

I simply belive you dont need a second month view if you are not forced to select the second date on it. Also using the Button to change one month card, but also changing the second without noticable feedback is irritating. Maybe just one left right button for both would be much more intuitive. (as in example in screenshot)

Screenshots Screenshot Description
3 Selecting the second date on the left because the calendar is so "seperated"
Unbenannt Selecting the range and ...
2 ... going back one month on the second card.
airbnb An example from airBnB.

Would also change both months as a two month block on click left/right button.

Information about your polls installation

Polls version? 1.8.3

Information about your Instance of Nextcloud

Nextcloud version: (see Nextcloud admin page) 20.0.9

Client configuration

Device: Desktop

Browser: Firefox, Chrome,

dartcafe commented 3 years ago

@TJ-shmt Good feedback. Unfortunately this is the default behavior of the component used. TBH I was confused about the behavior, too. But I learned the behavior and so I personally can handle it, when the range is open.

There is a global issue in the nextcloud-vue repo https://github.com/nextcloud/nextcloud-vue/issues/1666 which addresses the UX of the datepicker.

dartcafe commented 3 years ago

But I fear, this is something the author of the datepicker (https://github.com/mengxiong10/vue2-datepicker) has to solve, as this behavior is not controllable AFAIK.

jancborchardt commented 3 years ago

@ma12-co since you brought up the issue in the components repository – what do you think about @TJ-shmt’s analysis and proposal to possibly do it like AirBnb? Is that something we can do in our component (and possibly we could move this issue into the components repository), or is it out of our control?

mengxiong10 commented 3 years ago

https://codesandbox.io/s/range-in-datepicker2x-mode-hlzrg?file=/src/App.vue Maybe can help you.

marcoambrosini commented 3 years ago

I very much agree with the proposal but I'm not familiar with the library we're using at the moment for the date picker so this would require further investigation. Yep let's move this there!