Nextcloud-vue: Datepicker fixes

[skjnldsv]

• [x] Days of the week should have same colour as disabled days
• [x] More padding on the headers
• [x] Arrows with the same design as the original datepicker
• [ ] OK button with better wording
• [x] Wrap it
• [ ] Automatically use the provider locale from nc

[georgehrke]

• [x] support dark mode 😉

[caugner]

• Support changing the month without having to choose the day again
• Support changing the year without having to choose month and day again

[skjnldsv]

@caugner this should go into https://github.com/mengxiong10/vue2-datepicker :wink:

[caugner]

Thanks @skjnldsv, I just did that: https://github.com/mengxiong10/vue2-datepicker/issues/290

[caugner]

@skjnldsv The author of vue2-datepicker has suggested the following solution (requires v2.11.0 or later) to support changing month and year individually:

<template>
  <div id="app">
    <date-picker
      @select-year="handleSelectYear"
      @select-month="handleSelectMonth"
      v-model="value"
      lang="en"
      ref="datepicker"
      confirm
    ></date-picker>
  </div>
</template>

<script>
import DatePicker from "vue2-datepicker";

export default {
  name: "App",
  components: { DatePicker },
  data() {
    return {
      value: null
    };
  },
  methods: {
    handleSelectYear(year) {
      if (this.value) {
        const value = new Date(new Date(this.value).setFullYear(year));
        this.$refs.datepicker.selectDate(value);
      }
    },
    handleSelectMonth(month) {
      if (this.value) {
        const value = new Date(new Date(this.value).setMonth(month));
        this.$refs.datepicker.selectDate(value);
      }
    }
  }
};
</script>

[skjnldsv]

@caugner can you implement the changes on contacts then? :)

[caugner]

@skjnldsv Sure, will submit a PR these days. Any reason not to implement it in nextcloud-vue?
(If a user changes the year and presses "OK", I would expect the date to change, not only in the Contacts app.)

[skjnldsv]

@caugner Good question, I assumed it was just a matter or binding the year/month event to update contact which was, well, a contact issue.
But looking at your code it's probably a good idea to implement this here.
Though there is an option to use (we do in contacts) which is confirm and require the user to validate the change, so I don't see how it will play out with the event which is on select :thinking:

[skjnldsv]

@caugner any update? :)