search

mymth / vanillajs-datepicker

A vanilla JavaScript remake of bootstrap-datepicker for Bulma and other CSS frameworks
MIT License
719 stars 147 forks source link

defaultViewDate sets focus on day number #183

Closed espen closed 3 weeks ago

espen commented 3 months ago

defaultViewDate is today by default (March 22 today) When navigating to next month it will give April 22 css class 'focused' because it has the same day number as the selected date (March 22). This looks strange as I am in a new month but a specific date (22nd) looks differently (focused). I don't see any UX reason why it should look different, I would argue it only causes confusion. That the selected date in another month shares the same day number in the current month view is irrelevant. Even stranger is that when viewing April and selected day is May 6ht, the calendar will show May 6th as selected and April 6th as focused in the same view.

I suggest that the css class focused is cleared on navigation.

espen commented 3 months ago

Reproduce:

  1. Go to https://raw.githack.com/mymth/vanillajs-datepicker/v1.3.4/demo/
  2. Select inline
  3. Today date is focused
  4. Click next month
  5. The same day number as the current date is focused.
mymth commented 3 months ago

Please try doing the following on the online demo and see what happens.

  1. Select Inline
  2. Check 'tabindex="0"'
  3. Click the space right side of the date picker
  4. Press one of the arrow keys (←, →, ↑, ↓) a couple of times
  5. Press Enter key
  6. Press Ctrl + → keys (on Mac, ⌘ + →)
  7. Repeat 4 and 5

Basically, my thoughts are still the same as #58. But I started thinking about improvement.

espen commented 3 weeks ago

Duplicate of #58