Vue2-datepicker: confirm: value doesn't change on "OK", if only year and/or month were changed

[caugner]

The month and year of a date cannot currently be changed alone (using the UI).

Steps to reproduce

1. <date-picker v-model="value" confirm />
2. Choose a date, e.g. 2019-04-07.
3. Choose a different year, e.g. 2020, and press "OK".
4. Date is still 2019-04-07.
5. Choose a different month, e.g. 05, and press "OK".
6. Date is still 2019-04-07.

Expected result

It should be possible to change ...

1. the month without having to choose the day again.
2. the year without having to choose the month (and the day) again.

Actual result

The changes are ignored unless day or month and day are chosen.

[mengxiong10]

v2.11.0 added select-year and select-month.

<date-picker @select-year="handleSelectYear" @select-month="handleSelectMonth" v-model="value" lang="en" ></date-picker>

    handleSelectYear (year) {
      if (this.value) {
        this.value = new Date(new Date(this.value).setFullYear(year))
      }
    },
    handleSelectMonth (month) {
      if (this.value) {
        this.value = new Date(new Date(this.value).setMonth(month))
      }
    }

[caugner]

@mengxiong10 Thank you for the quick reaction and adding the select-year and select-month events.

Is it a deliberate design decision that the value doesn't already change once a different year is selected (see screenshots taken here) using the default configuration (<date-picker v-model="value1" lang="en" ></date-picker>)?

1. 
2. 
3. 
4. 
5. 

[mengxiong10]

Yes, Because the prop not-after and not-before makes it very complicated.

[caugner]

I understand. In case where not-after or not-before are set, couldn't the new value be emitted immediately if and only if it is valid (i.e. if it is in the allowed range)?

Looking again at the API, it might actually be sufficient for my case to listen for calendar-change, because it is emitted in all cases (year change, month change, day change), isn't it?

(The select-year and select-month events nevertheless make sense.)

Update: Actually we use confirm and listen for the confirm event, but the confirm event's payload won't include the new date, except if year, month and day were selected:

 <date-picker v-model="value" confirm />

[caugner]

@mengxiong10 FYI I have added the example with confirm both in the issue description and in my previous comment, which makes the problem more clearer.

[mengxiong10]

The select-year event will only be triggered by selecting the year.
The calendar-change event will be triggered by clicking the arrow too.
The confirm event will only be triggered by clicking the OK button.
You can achieve what you need by https://github.com/mengxiong10/vue2-datepicker/issues/290#issuecomment-481237289

[caugner]

The confirm event will only be triggered by clicking the OK button.

If I select a year and then click the OK button, the payload of the confirm event still includes the old year.

[mengxiong10]

https://codesandbox.io/s/9812vnx124?fontsize=14

[caugner]

https://codesandbox.io/s/9812vnx124?fontsize=14

If I add confirm (https://codesandbox.io/s/8287rwol7j), the date changes before I press OK.

PS: An <input type="date" /> also allows to change the year without having to reconfirm month and day, even if the equivalent of not-before (min) and not-after (max) are set.

[mengxiong10]

If you need to confirm the select-year
https://codesandbox.io/s/vvz89oqno3

[caugner]

I respect that you don't agree, so I'm closing this issue and will suggest your proposed solution/workaround in https://github.com/nextcloud/nextcloud-vue/issues/137.

PS: I still think it's a pity that I need to handle two events and call a method on the instance to get a behaviour that I would expect by default (being consistent with the UX of other datepickers). For example, Android's DatePicker allows setting a minDate and a maxDate and still allows changing the year on it's own; the OnDateChangedListener is only called with dates that adhere to these constraints.

[caugner]

Let me add:
Thank you for developing this library, taking the time to respond and providing a solution!
And sorry for my insistence in this matter.

[caugner]

https://codesandbox.io/s/9812vnx124?fontsize=14

@mengxiong10 Unfortunately, there is a problem with your suggested workaround: If year and month are changed in one go, only the month is changed upon confirmation:

(Source: https://github.com/nextcloud/contacts/issues/1196)

Do you have a tip how to fix this?

[mengxiong10]

    handleSelectYear(year) {
      let value = this.$refs.datepicker.currentValue;
      if (value) {
        value = new Date(new Date(value).setFullYear(year));
        this.$refs.datepicker.selectDate(value);
      }
    },
    handleSelectMonth(month) {
      let value = this.$refs.datepicker.currentValue;
      if (value) {
        value = new Date(new Date(value).setMonth(month));
        this.$refs.datepicker.selectDate(value);
      }
    }

[caugner]

Thanks a lot, @mengxiong10.

[mengxiong10]

I added a prop partial-update implement this feature in ^3.0.2.
https://codesandbox.io/s/partial-update-kc4k1?fontsize=14&hidenavigation=1&theme=dark