When month selector is open, change date by year instead of month

[Edward-Ta]

Hi, when you open the month selector I would like the arrows to change from 'changing months' to 'changing years'. I have implemented this locally in an awkward sort of way by checking if its open or not, I'm wondering if its possible to get this developed properly?

Locally I just added this:

if(document.getElementsByClassName("month-selector open").length != 0){
        direction = direction * 12;
    }

to the incremementMonth function in svelte-calendar/src/Components/DatePicker.svelte

  function incrementMonth(direction, day = 1) {
    if (direction === 1 && !canIncrementMonth) return;
    if (direction === -1 && !canDecrementMonth) return;
    let current = new Date(year, month, 1);
    if(document.getElementsByClassName("month-selector open").length != 0){
        direction = direction * 12;
    }
    current.setMonth(current.getMonth() + direction);
    month = current.getMonth();
    year = current.getFullYear();
    highlighted = new Date(year, month, day);
  }

Thank you.

[coccus1991]

Hi, when you open the month selector I would like the arrows to change from 'changing months' to 'changing years'. I have implemented this locally in an awkward sort of way by checking if its open or not, I'm wondering if its possible to get this developed properly?

Locally I just added this:

if(document.getElementsByClassName("month-selector open").length != 0){
      direction = direction * 12;
  }

to the incremementMonth function in svelte-calendar/src/Components/DatePicker.svelte

  function incrementMonth(direction, day = 1) {
    if (direction === 1 && !canIncrementMonth) return;
    if (direction === -1 && !canDecrementMonth) return;
    let current = new Date(year, month, 1);
  if(document.getElementsByClassName("month-selector open").length != 0){
      direction = direction * 12;
  }
    current.setMonth(current.getMonth() + direction);
    month = current.getMonth();
    year = current.getFullYear();
    highlighted = new Date(year, month, day);
  }

Thank you.

Thx for suggestion i've implemented your snippet code on my project locally. Very helpful!

[6eDesign]

The calendar supports arrows and page up/down keys currently. In the next version the arrows will control the current context (day, year, month, or time picker) and the page up/down arrows will control the "next" level of picker (ex: on day picker they move months [like today], on month picker they control years, etc).

I may be able to allow some customization of the keys but I think what I have coded in the new version currently is a more intuitive default implementation for keyboard users than what is requested here.

[Edward-Ta]

Okay, a question I have then is, who is a keyboard user... i.e.: What front end user is likely to be using their keyboard to navigate a datepicker over their mouse? While its great for a power user to quickly navigate the datepicker with those keys, a lot of the people I know that will be using my system have never used arrow keys in their life.

Thank you for replying.

[jonathangreenemeier-vizio]

The arrow UI elements are still present in the new version and work the same as page up/down keys when clicked.

[6eDesign]

svelte-calendar@3.x was recently released and has an updated UX around the day, month, and year pickers along with many other enhancements and some breaking-changes to the component's API (hopefully all for the better). Feel free to check it out and provide feedback here or in a new issue.

[Edward-Ta]

Looks great will start using now!