feat(QDate): Improve range selection; add day slot for content; fix s…

…mall years; fix subtractFromDate/addToDate incorrect end of month day quasarframework#5434, quasarframework#7076, quasarframework#7290, quasarframework#8037, quasarframework#8658, quasarframework#8918, quasarframework#8926, quasarframework#9704, quasarframework#9704, quasarframework#12270, quasarframework#11730, quasarframework#12783

- add modelNavigation prop
- add range-change event
- fix cached function when changing from persian to gregorian calendars
- fix viewModel as text
- add more examples
- fix processing of years between 0 and 99
- fix subtractFromDate/addToDate incorrect end of month day
- start a new range selection if noUnset and selected date is in existing range

docs/src/examples/QDate/DaySlot.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="q-pa-md">
+    <div class="q-gutter-md">
+      <q-date
+        class="day-slot--example"
+        v-model="date"
+        range
+        multiple
+        :events="eventsFn"
+        :event-color="eventDetailsFn"
+      >
+        <template v-slot:day="day">
+          <small v-if="day.fill === true" class="text-grey-5">
+            {{ day.i }}
+          </small>
+          <div v-else-if="day.event" class="day-slot__events--example absolute-full">
+            <div
+              v-for="({ color, label }, index) in day.event"
+              :key="index"
+              :class="'bg-' + color"
+            >
+              <q-tooltip
+                :content-class="'day-slot__tooltip--example q-px-md q-py-sm rounded-borders bg-' + color + '-1 text-subtitle2 text-' + color"
+                anchor="bottom right"
+                self="top left"
+                :offset="[ 4, 4 ]"
+              >
+                <span class="text-grey-10">{{ label }}</span>
+              </q-tooltip>
+            </div>
+          </div>
+        </template>
+      </q-date>
+    </div>
+  </div>
+</template>
+
+<style lang="sass">
+.day-slot__events--example
+  border-radius: 50%
+  mix-blend-mode: overlay
+
+  > div
+    position: absolute
+    left: 0
+    right: 0
+    height: 50%
+
+  > div:first-child
+    top: 0
+    border-top-left-radius: 15px
+    border-top-right-radius: 15px
+
+  > div:last-child
+    bottom: 0
+    border-bottom-left-radius: 15px
+    border-bottom-right-radius: 15px
+
+  > div:first-child:last-child
+    height: 100%
+
+.day-slot--example
+  .q-btn--unelevated
+    .day-slot__events--example
+      border: 2px solid transparent
+
+  .q-date__calendar-item--fill
+    visibility: visible
+    cursor: not-allowed
+
+.day-slot__tooltip--example
+  border: 2px solid currentColor
+</style>
+
+<script>
+export default {
+  data () {
+    return {
+      date: [ { from: '2020/12/28', to: '2021/01/02' } ]
+    }
+  },
+
+  methods: {
+    eventsFn (date) {
+      const parts = date.split('/')
+      return [ 1, 3 ].indexOf(parts[2] % 6) > -1
+    },
+
+    eventDetailsFn (date) {
+      const parts = date.split('/')
+      return parts[2] % 6 === 1
+        ? [
+            {
+              color: 'red',
+              label: `Event on ${date}`
+            }
+          ]
+        : [
+            {
+              color: 'orange',
+              label: `Task on ${date}`
+            },
+            {
+              color: 'green',
+              label: `Recurring event on ${date}`
+            }
+          ]
+    }
+  }
+}
+</script>

docs/src/examples/QDate/Input.vue

@@ -3,12 +3,8 @@
     <q-input filled v-model="date" mask="date" :rules="['date']">
       <template v-slot:append>
         <q-icon name="event" class="cursor-pointer">
-          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-            <q-date v-model="date">
-              <div class="row items-center justify-end">
-                <q-btn v-close-popup label="Close" color="primary" flat />
-              </div>
-            </q-date>
+          <q-popup-proxy ref="qDateProxy" cover transition-show="scale" transition-hide="scale">
+            <q-date v-model="date" @input="() => $refs.qDateProxy.hide()" />
           </q-popup-proxy>
         </q-icon>
       </template>

docs/src/examples/QDate/IntervalSelection.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="q-pa-md">
+    <div class="q-gutter-md row">
+      <div class="row items-start shadow-2">
+        <q-date
+          ref="start"
+          v-model="selectedDates"
+          range
+          :default-year-month="defaultYMStart"
+          :navigation-min-year-month="selectionStarted ? defaultYMStart : void 0"
+          :navigation-max-year-month="selectionStarted ? defaultYMStart : void 0"
+          minimal
+          flat
+          @navigation="(yearMonth) => { syncCalendars('start', yearMonth) }"
+          @range-start="onSelectionStart"
+          @range-change="onSelectionChange"
+          @range-end="onSelectionEnd"
+        />
+
+        <q-date
+          ref="end"
+          v-model="selectedDates"
+          range
+          :default-year-month="defaultYMEnd"
+          :navigation-min-year-month="selectionStarted ? defaultYMEnd : void 0"
+          :model-navigation="false"
+          minimal
+          flat
+          @navigation="(yearMonth) => { syncCalendars('end', yearMonth) }"
+          @range-start="onSelectionStart"
+          @range-change="onSelectionChange"
+          @range-end="onSelectionEnd"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const ym2hash = ({ year, month }) => `${year}/${month > 9 ? '' : '0'}${month}`
+
+export default {
+  data () {
+    return {
+      defaultYMStart: '2020/03',
+      defaultYMEnd: '2020/04',
+
+      selectedDates: null,
+
+      selectionStarted: false
+    }
+  },
+
+  methods: {
+    onSelectionStart (from) {
+      this.selectionStarted = true
+
+      this.defaultYMStart = ym2hash(from)
+      this.defaultYMEnd = ym2hash({
+        year: from.month === 12 ? from.year + 1 : from.year,
+        month: from.month === 12 ? 1 : from.month + 1
+      })
+
+      this.$refs.start.setEditingRange(from, from)
+      this.$refs.end.setEditingRange(from, from)
+    },
+
+    onSelectionChange ({ from, to }) {
+      this.$refs.start.setEditingRange(from, to, 'from')
+      this.$refs.end.setEditingRange(from, to, 'to')
+    },
+
+    onSelectionEnd () {
+      this.selectionStarted = false
+
+      this.$refs.start.setEditingRange()
+      this.$refs.end.setEditingRange()
+    },
+
+    syncCalendars (selectionEnd, yearMonth) {
+      if (selectionEnd === 'start') {
+        const start = ym2hash(yearMonth)
+
+        if (this.selectionStarted !== true) {
+          this.defaultYMStart = start
+        }
+
+        if (start >= this.defaultYMEnd) {
+          const end = ym2hash({
+            year: yearMonth.month === 12 ? yearMonth.year + 1 : yearMonth.year,
+            month: yearMonth.month === 12 ? 1 : yearMonth.month + 1
+          })
+
+          if (this.selectionStarted !== true) {
+            this.defaultYMEnd = end
+          }
+
+          this.$refs.end.setCalendarTo(...end.split('/'))
+        }
+      }
+      else if (selectionEnd === 'end') {
+        const end = ym2hash(yearMonth)
+
+        if (this.selectionStarted !== true) {
+          this.defaultYMEnd = end
+        }
+
+        if (this.defaultYMStart >= end) {
+          const start = ym2hash({
+            year: yearMonth.month === 1 ? yearMonth.year - 1 : yearMonth.year,
+            month: yearMonth.month === 1 ? 12 : yearMonth.month - 1
+          })
+
+          if (this.selectionStarted !== true) {
+            this.defaultYMEnd = start
+          }
+
+          this.$refs.start.setCalendarTo(...start.split('/'))
+        }
+      }
+    }
+  }
+}
+</script>