quasar 2.18.7 → 2.19.0

package/src/components/date/QDate.js

@@ -1,26 +1,47 @@
-import { h, ref, computed, watch, Transition, nextTick, getCurrentInstance } from 'vue'
+import {
+  h,
+  ref,
+  computed,
+  watch,
+  Transition,
+  nextTick,
+  getCurrentInstance
+} from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
 import useRenderCache from '../../composables/use-render-cache/use-render-cache.js'
-import { useFormProps, useFormAttrs, useFormInject } from '../../composables/use-form/private.use-form.js'
-import useDatetime, { useDatetimeProps, useDatetimeEmits, getDayHash } from './use-datetime.js'
+import {
+  useFormProps,
+  useFormAttrs,
+  useFormInject
+} from '../../composables/use-form/private.use-form.js'
+import useDatetime, {
+  useDatetimeProps,
+  useDatetimeEmits,
+  getDayHash
+} from './use-datetime.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
 import { formatDate, __splitDate, getDateDiff } from '../../utils/date/date.js'
 import { pad } from '../../utils/format/format.js'
-import { jalaaliMonthLength, toGregorian } from '../../utils/date/private.persian.js'
+import {
+  jalaaliMonthLength,
+  toGregorian
+} from '../../utils/date/private.persian.js'
 import { isObject } from '../../utils/is/is.js'
 
 const yearsInterval = 20
-const views = [ 'Calendar', 'Years', 'Months' ]
+const views = ['Calendar', 'Years', 'Months']
 const viewIsValid = v => views.includes(v)
 const yearMonthValidator = v => /^-?[\d]+\/[0-1]\d$/.test(v)
 const lineStr = ' \u2014 '
 
-function getMonthHash (date) {
+function getMonthHash(date) {
   return date.year + '/' + pad(date.month)
 }
 
@@ -34,7 +55,11 @@ export default createComponent({
 
     modelValue: {
       required: true,
-      validator: val => (typeof val === 'string' || Array.isArray(val) === true || Object(val) === val || val === null)
+      validator: val =>
+        typeof val === 'string' ||
+        Array.isArray(val) === true ||
+        Object(val) === val ||
+        val === null
     },
 
     multiple: Boolean,
@@ -57,12 +82,12 @@ export default createComponent({
 
     yearsInMonthView: Boolean,
 
-    events: [ Array, Function ],
-    eventColor: [ String, Function ],
+    events: [Array, Function],
+    eventColor: [String, Function],
 
     emitImmediately: Boolean,
 
-    options: [ Array, Function ],
+    options: [Array, Function],
 
     navigationMinYearMonth: {
       type: String,
@@ -76,7 +101,7 @@ export default createComponent({
 
     noUnset: Boolean,
 
-    firstDayOfWeek: [ String, Number ],
+    firstDayOfWeek: [String, Number],
     todayBtn: Boolean,
     minimal: Boolean,
     defaultView: {
@@ -86,18 +111,18 @@ export default createComponent({
     }
   },
 
-  emits: [
-    ...useDatetimeEmits,
-    'rangeStart', 'rangeEnd', 'navigation'
-  ],
+  emits: [...useDatetimeEmits, 'rangeStart', 'rangeEnd', 'navigation'],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
     const { getCache } = useRenderCache()
-    const { tabindex, headerClass, getLocale, getCurrentDate } = useDatetime(props, $q)
+    const { tabindex, headerClass, getLocale, getCurrentDate } = useDatetime(
+      props,
+      $q
+    )
 
     let lastEmitValue
 
@@ -122,101 +147,131 @@ export default createComponent({
     const monthDirection = ref(direction.value)
     const yearDirection = ref(direction.value)
 
-    const year = viewModel.value.year
-    const startYear = ref(year - (year % yearsInterval) - (year < 0 ? yearsInterval : 0))
+    const localYear = viewModel.value.year
+    const startYear = ref(
+      localYear -
+        (localYear % yearsInterval) -
+        (localYear < 0 ? yearsInterval : 0)
+    )
     const editRange = ref(null)
 
     const classes = computed(() => {
       const type = props.landscape === true ? 'landscape' : 'portrait'
-      return `q-date q-date--${ type } q-date--${ type }-${ props.minimal === true ? 'minimal' : 'standard' }`
-        + (isDark.value === true ? ' q-date--dark q-dark' : '')
-        + (props.bordered === true ? ' q-date--bordered' : '')
-        + (props.square === true ? ' q-date--square no-border-radius' : '')
-        + (props.flat === true ? ' q-date--flat no-shadow' : '')
-        + (props.disable === true ? ' disabled' : (props.readonly === true ? ' q-date--readonly' : ''))
+      return (
+        `q-date q-date--${type} q-date--${type}-${props.minimal === true ? 'minimal' : 'standard'}` +
+        (isDark.value === true ? ' q-date--dark q-dark' : '') +
+        (props.bordered === true ? ' q-date--bordered' : '') +
+        (props.square === true ? ' q-date--square no-border-radius' : '') +
+        (props.flat === true ? ' q-date--flat no-shadow' : '') +
+        (props.disable === true
+          ? ' disabled'
+          : props.readonly === true
+            ? ' q-date--readonly'
+            : '')
+      )
     })
 
-    const computedColor = computed(() => {
-      return props.color || 'primary'
-    })
+    const computedColor = computed(() => props.color || 'primary')
 
-    const computedTextColor = computed(() => {
-      return props.textColor || 'white'
-    })
+    const computedTextColor = computed(() => props.textColor || 'white')
 
-    const isImmediate = computed(() =>
-      props.emitImmediately === true
-      && props.multiple !== true
-      && props.range !== true
+    const isImmediate = computed(
+      () =>
+        props.emitImmediately === true &&
+        props.multiple !== true &&
+        props.range !== true
     )
 
-    const normalizedModel = computed(() => (
+    const normalizedModel = computed(() =>
       Array.isArray(props.modelValue) === true
         ? props.modelValue
-        : (props.modelValue !== null && props.modelValue !== void 0 ? [ props.modelValue ] : [])
-    ))
+        : props.modelValue !== null && props.modelValue !== void 0
+          ? [props.modelValue]
+          : []
+    )
 
     const daysModel = computed(() =>
       normalizedModel.value
         .filter(date => typeof date === 'string')
         .map(date => decodeString(date, innerMask.value, innerLocale.value))
-        .filter(date =>
-          date.dateHash !== null
-          && date.day !== null
-          && date.month !== null
-          && date.year !== null
+        .filter(
+          date =>
+            date.dateHash !== null &&
+            date.day !== null &&
+            date.month !== null &&
+            date.year !== null
         )
     )
 
     const rangeModel = computed(() => {
       const fn = date => decodeString(date, innerMask.value, innerLocale.value)
       return normalizedModel.value
-        .filter(date => isObject(date) === true && date.from !== void 0 && date.to !== void 0)
+        .filter(
+          date =>
+            isObject(date) === true &&
+            date.from !== void 0 &&
+            date.to !== void 0
+        )
         .map(range => ({ from: fn(range.from), to: fn(range.to) }))
-        .filter(range => range.from.dateHash !== null && range.to.dateHash !== null && range.from.dateHash < range.to.dateHash)
+        .filter(
+          range =>
+            range.from.dateHash !== null &&
+            range.to.dateHash !== null &&
+            range.from.dateHash < range.to.dateHash
+        )
     })
 
-    const getNativeDateFn = computed(() => (
+    const getNativeDateFn = computed(() =>
       props.calendar !== 'persian'
         ? model => new Date(model.year, model.month - 1, model.day)
         : model => {
-          const gDate = toGregorian(model.year, model.month, model.day)
-          return new Date(gDate.gy, gDate.gm - 1, gDate.gd)
-        }
-    ))
+            const gDate = toGregorian(model.year, model.month, model.day)
+            return new Date(gDate.gy, gDate.gm - 1, gDate.gd)
+          }
+    )
 
-    const encodeObjectFn = computed(() => (
+    const encodeObjectFn = computed(() =>
       props.calendar === 'persian'
         ? getDayHash
-        : (date, mask, locale) => formatDate(
-            new Date(
+        : (date, dateMask, dateLocale) =>
+            formatDate(
+              new Date(
+                date.year,
+                date.month - 1,
+                date.day,
+                date.hour,
+                date.minute,
+                date.second,
+                date.millisecond
+              ),
+              dateMask === void 0 ? innerMask.value : dateMask,
+              dateLocale === void 0 ? innerLocale.value : dateLocale,
               date.year,
-              date.month - 1,
-              date.day,
-              date.hour,
-              date.minute,
-              date.second,
-              date.millisecond
-            ),
-            mask === void 0 ? innerMask.value : mask,
-            locale === void 0 ? innerLocale.value : locale,
-            date.year,
-            date.timezoneOffset
-          )
-    ))
+              date.timezoneOffset
+            )
+    )
 
-    const daysInModel = computed(() =>
-      daysModel.value.length + rangeModel.value.reduce(
-        (acc, range) => acc + 1 + getDateDiff(
-          getNativeDateFn.value(range.to),
-          getNativeDateFn.value(range.from)
-        ),
-        0
-      )
+    const daysInModel = computed(
+      () =>
+        daysModel.value.length +
+        rangeModel.value.reduce(
+          (acc, range) =>
+            acc +
+            1 +
+            getDateDiff(
+              getNativeDateFn.value(range.to),
+              getNativeDateFn.value(range.from)
+            ),
+          0
+        )
     )
 
     const headerTitle = computed(() => {
-      if (props.title !== void 0 && props.title !== null && props.title.length !== 0) {
+      if (
+        props.title !== void 0 &&
+        props.title !== null &&
+        props.title.length !== 0
+      ) {
         return props.title
       }
 
@@ -224,9 +279,15 @@ export default createComponent({
         const model = editRange.value.init
         const date = getNativeDateFn.value(model)
 
-        return innerLocale.value.daysShort[ date.getDay() ] + ', '
-          + innerLocale.value.monthsShort[ model.month - 1 ] + ' '
-          + model.day + lineStr + '?'
+        return (
+          innerLocale.value.daysShort[date.getDay()] +
+          ', ' +
+          innerLocale.value.monthsShort[model.month - 1] +
+          ' ' +
+          model.day +
+          lineStr +
+          '?'
+        )
       }
 
       if (daysInModel.value === 0) {
@@ -234,10 +295,10 @@ export default createComponent({
       }
 
       if (daysInModel.value > 1) {
-        return `${ daysInModel.value } ${ innerLocale.value.pluralDay }`
+        return `${daysInModel.value} ${innerLocale.value.pluralDay}`
       }
 
-      const model = daysModel.value[ 0 ]
+      const model = daysModel.value[0]
       const date = getNativeDateFn.value(model)
 
       if (isNaN(date.valueOf()) === true) {
@@ -248,27 +309,37 @@ export default createComponent({
         return innerLocale.value.headerTitle(date, model)
       }
 
-      return innerLocale.value.daysShort[ date.getDay() ] + ', '
-        + innerLocale.value.monthsShort[ model.month - 1 ] + ' '
-        + model.day
+      return (
+        innerLocale.value.daysShort[date.getDay()] +
+        ', ' +
+        innerLocale.value.monthsShort[model.month - 1] +
+        ' ' +
+        model.day
+      )
     })
 
     const minSelectedModel = computed(() => {
-      const model = daysModel.value.concat(rangeModel.value.map(range => range.from))
+      const model = daysModel.value
+        .concat(rangeModel.value.map(range => range.from))
         .sort((a, b) => a.year - b.year || a.month - b.month)
 
-      return model[ 0 ]
+      return model[0]
     })
 
     const maxSelectedModel = computed(() => {
-      const model = daysModel.value.concat(rangeModel.value.map(range => range.to))
+      const model = daysModel.value
+        .concat(rangeModel.value.map(range => range.to))
         .sort((a, b) => b.year - a.year || b.month - a.month)
 
-      return model[ 0 ]
+      return model[0]
     })
 
     const headerSubtitle = computed(() => {
-      if (props.subtitle !== void 0 && props.subtitle !== null && props.subtitle.length !== 0) {
+      if (
+        props.subtitle !== void 0 &&
+        props.subtitle !== null &&
+        props.subtitle.length !== 0
+      ) {
         return props.subtitle
       }
 
@@ -281,34 +352,37 @@ export default createComponent({
         const to = maxSelectedModel.value
         const month = innerLocale.value.monthsShort
 
-        return month[ from.month - 1 ] + (
-          from.year !== to.year
-            ? ' ' + from.year + lineStr + month[ to.month - 1 ] + ' '
-            : (
-                from.month !== to.month
-                  ? lineStr + month[ to.month - 1 ]
-                  : ''
-              )
-        ) + ' ' + to.year
+        return (
+          month[from.month - 1] +
+          (from.year !== to.year
+            ? ' ' + from.year + lineStr + month[to.month - 1] + ' '
+            : from.month !== to.month
+              ? lineStr + month[to.month - 1]
+              : '') +
+          ' ' +
+          to.year
+        )
       }
 
-      return daysModel.value[ 0 ].year
+      return daysModel.value[0].year
     })
 
     const dateArrow = computed(() => {
-      const val = [ $q.iconSet.datetime.arrowLeft, $q.iconSet.datetime.arrowRight ]
+      const val = [
+        $q.iconSet.datetime.arrowLeft,
+        $q.iconSet.datetime.arrowRight
+      ]
       return $q.lang.rtl === true ? val.reverse() : val
     })
 
-    const computedFirstDayOfWeek = computed(() => (
+    const computedFirstDayOfWeek = computed(() =>
       props.firstDayOfWeek !== void 0
         ? Number(props.firstDayOfWeek)
         : innerLocale.value.firstDayOfWeek
-    ))
+    )
 
     const daysOfWeek = computed(() => {
-      const
-        days = innerLocale.value.daysShort,
+      const days = innerLocale.value.daysShort,
         first = computedFirstDayOfWeek.value
 
       return first > 0
@@ -319,15 +393,15 @@ export default createComponent({
     const daysInMonth = computed(() => {
       const date = viewModel.value
       return props.calendar !== 'persian'
-        ? (new Date(date.year, date.month, 0)).getDate()
+        ? new Date(date.year, date.month, 0).getDate()
         : jalaaliMonthLength(date.year, date.month)
     })
 
-    const evtColor = computed(() => (
+    const evtColor = computed(() =>
       typeof props.eventColor === 'function'
         ? props.eventColor
         : () => props.eventColor
-    ))
+    )
 
     const minNav = computed(() => {
       if (props.navigationMinYearMonth === void 0) {
@@ -335,7 +409,7 @@ export default createComponent({
       }
 
       const data = props.navigationMinYearMonth.split('/')
-      return { year: parseInt(data[ 0 ], 10), month: parseInt(data[ 1 ], 10) }
+      return { year: parseInt(data[0], 10), month: parseInt(data[1], 10) }
     })
 
     const maxNav = computed(() => {
@@ -344,7 +418,7 @@ export default createComponent({
       }
 
       const data = props.navigationMaxYearMonth.split('/')
-      return { year: parseInt(data[ 0 ], 10), month: parseInt(data[ 1 ], 10) }
+      return { year: parseInt(data[0], 10), month: parseInt(data[1], 10) }
     })
 
     const navBoundaries = computed(() => {
@@ -355,14 +429,20 @@ export default createComponent({
 
       if (minNav.value !== null && minNav.value.year >= viewModel.value.year) {
         data.year.prev = false
-        if (minNav.value.year === viewModel.value.year && minNav.value.month >= viewModel.value.month) {
+        if (
+          minNav.value.year === viewModel.value.year &&
+          minNav.value.month >= viewModel.value.month
+        ) {
           data.month.prev = false
         }
       }
 
       if (maxNav.value !== null && maxNav.value.year <= viewModel.value.year) {
         data.year.next = false
-        if (maxNav.value.year === viewModel.value.year && maxNav.value.month <= viewModel.value.month) {
+        if (
+          maxNav.value.year === viewModel.value.year &&
+          maxNav.value.month <= viewModel.value.month
+        ) {
           data.month.next = false
         }
       }
@@ -376,11 +456,11 @@ export default createComponent({
       daysModel.value.forEach(entry => {
         const hash = getMonthHash(entry)
 
-        if (map[ hash ] === void 0) {
-          map[ hash ] = []
+        if (map[hash] === void 0) {
+          map[hash] = []
         }
 
-        map[ hash ].push(entry.day)
+        map[hash].push(entry.day)
       })
 
       return map
@@ -393,11 +473,11 @@ export default createComponent({
         const hashFrom = getMonthHash(entry.from)
         const hashTo = getMonthHash(entry.to)
 
-        if (map[ hashFrom ] === void 0) {
-          map[ hashFrom ] = []
+        if (map[hashFrom] === void 0) {
+          map[hashFrom] = []
         }
 
-        map[ hashFrom ].push({
+        map[hashFrom].push({
           from: entry.from.day,
           to: hashFrom === hashTo ? entry.to.day : void 0,
           range: entry
@@ -406,16 +486,17 @@ export default createComponent({
         if (hashFrom < hashTo) {
           let hash
           const { year, month } = entry.from
-          const cur = month < 12
-            ? { year, month: month + 1 }
-            : { year: year + 1, month: 1 }
+          const cur =
+            month < 12
+              ? { year, month: month + 1 }
+              : { year: year + 1, month: 1 }
 
           while ((hash = getMonthHash(cur)) <= hashTo) {
-            if (map[ hash ] === void 0) {
-              map[ hash ] = []
+            if (map[hash] === void 0) {
+              map[hash] = []
             }
 
-            map[ hash ].push({
+            map[hash].push({
               from: void 0,
               to: hash === hashTo ? entry.to.day : void 0,
               range: entry
@@ -438,37 +519,32 @@ export default createComponent({
 
       const { init, initHash, final, finalHash } = editRange.value
 
-      const [ from, to ] = initHash <= finalHash
-        ? [ init, final ]
-        : [ final, init ]
+      const [from, to] = initHash <= finalHash ? [init, final] : [final, init]
 
       const fromHash = getMonthHash(from)
       const toHash = getMonthHash(to)
 
-      if (
-        fromHash !== viewMonthHash.value
-        && toHash !== viewMonthHash.value
-      ) return
+      if (fromHash !== viewMonthHash.value && toHash !== viewMonthHash.value) {
+        return
+      }
 
-      const view = {}
+      const localView = {}
 
       if (fromHash === viewMonthHash.value) {
-        view.from = from.day
-        view.includeFrom = true
-      }
-      else {
-        view.from = 1
+        localView.from = from.day
+        localView.includeFrom = true
+      } else {
+        localView.from = 1
       }
 
       if (toHash === viewMonthHash.value) {
-        view.to = to.day
-        view.includeTo = true
-      }
-      else {
-        view.to = daysInMonth.value
+        localView.to = to.day
+        localView.includeTo = true
+      } else {
+        localView.to = daysInMonth.value
       }
 
-      return view
+      return localView
     })
 
     const viewMonthHash = computed(() => getMonthHash(viewModel.value))
@@ -478,19 +554,20 @@ export default createComponent({
 
       if (props.options === void 0) {
         for (let i = 1; i <= daysInMonth.value; i++) {
-          map[ i ] = true
+          map[i] = true
         }
 
         return map
       }
 
-      const fn = typeof props.options === 'function'
-        ? props.options
-        : date => props.options.includes(date)
+      const fn =
+        typeof props.options === 'function'
+          ? props.options
+          : date => props.options.includes(date)
 
       for (let i = 1; i <= daysInMonth.value; i++) {
         const dayHash = viewMonthHash.value + '/' + pad(i)
-        map[ i ] = fn(dayHash)
+        map[i] = fn(dayHash)
       }
 
       return map
@@ -501,17 +578,17 @@ export default createComponent({
 
       if (props.events === void 0) {
         for (let i = 1; i <= daysInMonth.value; i++) {
-          map[ i ] = false
+          map[i] = false
         }
-      }
-      else {
-        const fn = typeof props.events === 'function'
-          ? props.events
-          : date => props.events.includes(date)
+      } else {
+        const fn =
+          typeof props.events === 'function'
+            ? props.events
+            : date => props.events.includes(date)
 
         for (let i = 1; i <= daysInMonth.value; i++) {
           const dayHash = viewMonthHash.value + '/' + pad(i)
-          map[ i ] = fn(dayHash) === true && evtColor.value(dayHash)
+          map[i] = fn(dayHash) === true && evtColor.value(dayHash)
         }
       }
 
@@ -524,9 +601,8 @@ export default createComponent({
 
       if (props.calendar !== 'persian') {
         date = new Date(year, month - 1, 1)
-        endDay = (new Date(year, month - 1, 0)).getDate()
-      }
-      else {
+        endDay = new Date(year, month - 1, 0).getDate()
+      } else {
         const gDate = toGregorian(year, month, 1)
         date = new Date(gDate.gy, gDate.gm - 1, gDate.gd)
         let prevJM = month - 1
@@ -546,9 +622,9 @@ export default createComponent({
 
     const days = computed(() => {
       const res = []
-      const { days, endDay } = viewDays.value
+      const { days: localDays, endDay } = viewDays.value
 
-      const len = days < 0 ? days + 7 : days
+      const len = localDays < 0 ? localDays + 7 : localDays
       if (len < 6) {
         for (let i = endDay - len; i <= endDay; i++) {
           res.push({ i, fill: true })
@@ -558,9 +634,9 @@ export default createComponent({
       const index = res.length
 
       for (let i = 1; i <= daysInMonth.value; i++) {
-        const day = { i, event: eventDaysMap.value[ i ], classes: [] }
+        const day = { i, event: eventDaysMap.value[i], classes: [] }
 
-        if (selectionDaysMap.value[ i ] === true) {
+        if (selectionDaysMap.value[i] === true) {
           day.in = true
           day.flat = true
         }
@@ -569,10 +645,10 @@ export default createComponent({
       }
 
       // if current view has days in model
-      if (daysMap.value[ viewMonthHash.value ] !== void 0) {
-        daysMap.value[ viewMonthHash.value ].forEach(day => {
+      if (daysMap.value[viewMonthHash.value] !== void 0) {
+        daysMap.value[viewMonthHash.value].forEach(day => {
           const i = index + day - 1
-          Object.assign(res[ i ], {
+          Object.assign(res[i], {
             selected: true,
             unelevated: true,
             flat: false,
@@ -583,14 +659,14 @@ export default createComponent({
       }
 
       // if current view has ranges in model
-      if (rangeMap.value[ viewMonthHash.value ] !== void 0) {
-        rangeMap.value[ viewMonthHash.value ].forEach(entry => {
+      if (rangeMap.value[viewMonthHash.value] !== void 0) {
+        rangeMap.value[viewMonthHash.value].forEach(entry => {
           if (entry.from !== void 0) {
             const from = index + entry.from - 1
             const to = index + (entry.to || daysInMonth.value) - 1
 
             for (let day = from; day <= to; day++) {
-              Object.assign(res[ day ], {
+              Object.assign(res[day], {
                 range: entry.range,
                 unelevated: true,
                 color: computedColor.value,
@@ -598,21 +674,22 @@ export default createComponent({
               })
             }
 
-            Object.assign(res[ from ], {
+            Object.assign(res[from], {
               rangeFrom: true,
               flat: false
             })
 
-            entry.to !== void 0 && Object.assign(res[ to ], {
-              rangeTo: true,
-              flat: false
-            })
-          }
-          else if (entry.to !== void 0) {
+            if (entry.to !== void 0) {
+              Object.assign(res[to], {
+                rangeTo: true,
+                flat: false
+              })
+            }
+          } else if (entry.to !== void 0) {
             const to = index + entry.to - 1
 
             for (let day = index; day <= to; day++) {
-              Object.assign(res[ day ], {
+              Object.assign(res[day], {
                 range: entry.range,
                 unelevated: true,
                 color: computedColor.value,
@@ -620,15 +697,14 @@ export default createComponent({
               })
             }
 
-            Object.assign(res[ to ], {
+            Object.assign(res[to], {
               flat: false,
               rangeTo: true
             })
-          }
-          else {
+          } else {
             const to = index + daysInMonth.value - 1
             for (let day = index; day <= to; day++) {
-              Object.assign(res[ day ], {
+              Object.assign(res[day], {
                 range: entry.range,
                 unelevated: true,
                 color: computedColor.value,
@@ -644,20 +720,23 @@ export default createComponent({
         const to = index + rangeView.value.to - 1
 
         for (let day = from; day <= to; day++) {
-          res[ day ].color = computedColor.value
-          res[ day ].editRange = true
+          res[day].color = computedColor.value
+          res[day].editRange = true
         }
 
         if (rangeView.value.includeFrom === true) {
-          res[ from ].editRangeFrom = true
+          res[from].editRangeFrom = true
         }
         if (rangeView.value.includeTo === true) {
-          res[ to ].editRangeTo = true
+          res[to].editRangeTo = true
         }
       }
 
-      if (viewModel.value.year === today.value.year && viewModel.value.month === today.value.month) {
-        res[ index + today.value.day - 1 ].today = true
+      if (
+        viewModel.value.year === today.value.year &&
+        viewModel.value.month === today.value.month
+      ) {
+        res[index + today.value.day - 1].today = true
       }
 
       const left = res.length % 7
@@ -673,20 +752,19 @@ export default createComponent({
 
         if (day.fill === true) {
           cls += 'q-date__calendar-item--fill'
-        }
-        else {
-          cls += `q-date__calendar-item--${ day.in === true ? 'in' : 'out' }`
+        } else {
+          cls += `q-date__calendar-item--${day.in === true ? 'in' : 'out'}`
 
           if (day.range !== void 0) {
-            cls += ` q-date__range${ day.rangeTo === true ? '-to' : (day.rangeFrom === true ? '-from' : '') }`
+            cls += ` q-date__range${day.rangeTo === true ? '-to' : day.rangeFrom === true ? '-from' : ''}`
           }
 
           if (day.editRange === true) {
-            cls += ` q-date__edit-range${ day.editRangeFrom === true ? '-from' : '' }${ day.editRangeTo === true ? '-to' : '' }`
+            cls += ` q-date__edit-range${day.editRangeFrom === true ? '-from' : ''}${day.editRangeTo === true ? '-to' : ''}`
           }
 
           if (day.range !== void 0 || day.editRange === true) {
-            cls += ` text-${ day.color }`
+            cls += ` text-${day.color}`
           }
         }
 
@@ -696,31 +774,40 @@ export default createComponent({
       return res
     })
 
-    const attributes = computed(() => (
-      props.disable === true
-        ? { 'aria-disabled': 'true' }
-        : {}
-    ))
+    const attributes = computed(() =>
+      props.disable === true ? { 'aria-disabled': 'true' } : {}
+    )
 
-    watch(() => props.modelValue, v => {
-      if (lastEmitValue === JSON.stringify(v)) {
-        lastEmitValue = 0
-      }
-      else {
-        const model = getViewModel(innerMask.value, innerLocale.value)
-        updateViewModel(model.year, model.month, model)
+    watch(
+      () => props.modelValue,
+      v => {
+        if (lastEmitValue === JSON.stringify(v)) {
+          lastEmitValue = 0
+        } else {
+          const model = getViewModel(innerMask.value, innerLocale.value)
+          updateViewModel(model.year, model.month, model)
+        }
       }
-    })
+    )
 
     watch(view, () => {
-      if (blurTargetRef.value !== null && proxy.$el.contains(document.activeElement) === true) {
+      if (
+        blurTargetRef.value !== null &&
+        proxy.$el.contains(document.activeElement) === true
+      ) {
         blurTargetRef.value.focus()
       }
     })
 
-    watch(() => viewModel.value.year + '|' + viewModel.value.month, () => {
-      emit('navigation', { year: viewModel.value.year, month: viewModel.value.month })
-    })
+    watch(
+      () => viewModel.value.year + '|' + viewModel.value.month,
+      () => {
+        emit('navigation', {
+          year: viewModel.value.year,
+          month: viewModel.value.month
+        })
+      }
+    )
 
     watch(mask, val => {
       updateValue(val, innerLocale.value, 'mask')
@@ -732,11 +819,11 @@ export default createComponent({
       innerLocale.value = val
     })
 
-    function setLastValue (v) {
+    function setLastValue(v) {
       lastEmitValue = JSON.stringify(v)
     }
 
-    function setToday () {
+    function setToday() {
       const { year, month, day } = today.value
 
       const date = {
@@ -750,7 +837,7 @@ export default createComponent({
         day
       }
 
-      const monthMap = daysMap.value[ getMonthHash(date) ]
+      const monthMap = daysMap.value[getMonthHash(date)]
 
       if (monthMap === void 0 || monthMap.includes(date.day) === false) {
         addToModel(date)
@@ -759,34 +846,33 @@ export default createComponent({
       setCalendarTo(date.year, date.month)
     }
 
-    function setView (viewMode) {
+    function setView(viewMode) {
       if (viewIsValid(viewMode) === true) {
         view.value = viewMode
       }
     }
 
-    function offsetCalendar (type, descending) {
-      if ([ 'month', 'year' ].includes(type)) {
+    function offsetCalendar(type, descending) {
+      if (['month', 'year'].includes(type)) {
         const fn = type === 'month' ? goToMonth : goToYear
         fn(descending === true ? -1 : 1)
       }
     }
 
-    function setCalendarTo (year, month) {
+    function setCalendarTo(year, month) {
       view.value = 'Calendar'
       updateViewModel(year, month)
     }
 
-    function setEditingRange (from, to) {
+    function setEditingRange(from, to) {
       if (props.range === false || !from) {
         editRange.value = null
         return
       }
 
       const init = Object.assign({ ...viewModel.value }, from)
-      const final = to !== void 0
-        ? Object.assign({ ...viewModel.value }, to)
-        : init
+      const final =
+        to !== void 0 ? Object.assign({ ...viewModel.value }, to) : init
 
       editRange.value = {
         init,
@@ -798,60 +884,52 @@ export default createComponent({
       setCalendarTo(init.year, init.month)
     }
 
-    function getMask () {
+    function getMask() {
       return props.calendar === 'persian' ? 'YYYY/MM/DD' : props.mask
     }
 
-    function decodeString (date, mask, locale) {
-      return __splitDate(
-        date,
-        mask,
-        locale,
-        props.calendar,
-        {
-          hour: 0,
-          minute: 0,
-          second: 0,
-          millisecond: 0
-        }
-      )
+    function decodeString(date, dateMask, dateLocale) {
+      return __splitDate(date, dateMask, dateLocale, props.calendar, {
+        hour: 0,
+        minute: 0,
+        second: 0,
+        millisecond: 0
+      })
     }
 
-    function getViewModel (mask, locale) {
-      const model = Array.isArray(props.modelValue) === true
-        ? props.modelValue
-        : (props.modelValue ? [ props.modelValue ] : [])
+    function getViewModel(dateMask, dateLocale) {
+      const model =
+        Array.isArray(props.modelValue) === true
+          ? props.modelValue
+          : props.modelValue
+            ? [props.modelValue]
+            : []
 
       if (model.length === 0) {
         return getDefaultViewModel()
       }
 
-      const target = model[ model.length - 1 ]
+      const target = model[model.length - 1]
       const decoded = decodeString(
         target.from !== void 0 ? target.from : target,
-        mask,
-        locale
+        dateMask,
+        dateLocale
       )
 
-      return decoded.dateHash === null
-        ? getDefaultViewModel()
-        : decoded
+      return decoded.dateHash === null ? getDefaultViewModel() : decoded
     }
 
-    function getDefaultViewModel () {
+    function getDefaultViewModel() {
       let year, month
 
       if (props.defaultYearMonth !== void 0) {
         const d = props.defaultYearMonth.split('/')
-        year = parseInt(d[ 0 ], 10)
-        month = parseInt(d[ 1 ], 10)
-      }
-      else {
+        year = parseInt(d[0], 10)
+        month = parseInt(d[1], 10)
+      } else {
         // may come from data() where computed
         // props are not yet available
-        const d = today.value !== void 0
-          ? today.value
-          : getCurrentDate()
+        const d = today.value !== void 0 ? today.value : getCurrentDate()
 
         year = d.year
         month = d.month
@@ -869,55 +947,53 @@ export default createComponent({
       }
     }
 
-    function goToMonth (offset) {
+    function goToMonth(offset) {
       let year = viewModel.value.year
       let month = Number(viewModel.value.month) + offset
 
       if (month === 13) {
         month = 1
         year++
-      }
-      else if (month === 0) {
+      } else if (month === 0) {
         month = 12
         year--
       }
 
       updateViewModel(year, month)
-      isImmediate.value === true && emitImmediately('month')
+      if (isImmediate.value === true) emitImmediately('month')
     }
 
-    function goToYear (offset) {
+    function goToYear(offset) {
       const year = Number(viewModel.value.year) + offset
       updateViewModel(year, viewModel.value.month)
-      isImmediate.value === true && emitImmediately('year')
+      if (isImmediate.value === true) emitImmediately('year')
     }
 
-    function setYear (year) {
+    function setYear(year) {
       updateViewModel(year, viewModel.value.month)
       view.value = props.defaultView === 'Years' ? 'Months' : 'Calendar'
-      isImmediate.value === true && emitImmediately('year')
+      if (isImmediate.value === true) emitImmediately('year')
     }
 
-    function setMonth (month) {
+    function setMonth(month) {
       updateViewModel(viewModel.value.year, month)
       view.value = 'Calendar'
-      isImmediate.value === true && emitImmediately('month')
+      if (isImmediate.value === true) emitImmediately('month')
     }
 
-    function toggleDate (date, monthHash) {
-      const month = daysMap.value[ monthHash ]
-      const fn = month?.includes(date.day) === true
-        ? removeFromModel
-        : addToModel
+    function toggleDate(date, monthHash) {
+      const month = daysMap.value[monthHash]
+      const fn =
+        month?.includes(date.day) === true ? removeFromModel : addToModel
 
       fn(date)
     }
 
-    function getShortDate (date) {
+    function getShortDate(date) {
       return { year: date.year, month: date.month, day: date.day }
     }
 
-    function updateViewModel (year, month, time) {
+    function updateViewModel(year, month, time) {
       if (minNav.value !== null && year <= minNav.value.year) {
         if (month < minNav.value.month || year < minNav.value.year) {
           month = minNav.value.month
@@ -933,20 +1009,32 @@ export default createComponent({
       }
 
       if (time !== void 0) {
-        const { hour, minute, second, millisecond, timezoneOffset, timeHash } = time
-        Object.assign(viewModel.value, { hour, minute, second, millisecond, timezoneOffset, timeHash })
+        const { hour, minute, second, millisecond, timezoneOffset, timeHash } =
+          time
+        Object.assign(viewModel.value, {
+          hour,
+          minute,
+          second,
+          millisecond,
+          timezoneOffset,
+          timeHash
+        })
       }
 
       const newHash = year + '/' + pad(month) + '/01'
 
       if (newHash !== viewModel.value.dateHash) {
-        monthDirection.value = (viewModel.value.dateHash < newHash) === ($q.lang.rtl !== true) ? 'left' : 'right'
+        monthDirection.value =
+          viewModel.value.dateHash < newHash === ($q.lang.rtl !== true)
+            ? 'left'
+            : 'right'
         if (year !== viewModel.value.year) {
           yearDirection.value = monthDirection.value
         }
 
         nextTick(() => {
-          startYear.value = year - year % yearsInterval - (year < 0 ? yearsInterval : 0)
+          startYear.value =
+            year - (year % yearsInterval) - (year < 0 ? yearsInterval : 0)
           Object.assign(viewModel.value, {
             year,
             month,
@@ -957,10 +1045,11 @@ export default createComponent({
       }
     }
 
-    function emitValue (val, action, date) {
-      const value = val !== null && val.length === 1 && props.multiple === false
-        ? val[ 0 ]
-        : val
+    function emitValue(val, action, date) {
+      const value =
+        val !== null && val.length === 1 && props.multiple === false
+          ? val[0]
+          : val
 
       const { reason, details } = getEmitParams(action, date)
 
@@ -968,19 +1057,21 @@ export default createComponent({
       emit('update:modelValue', value, reason, details)
     }
 
-    function emitImmediately (reason) {
-      const date = daysModel.value[ 0 ] !== void 0 && daysModel.value[ 0 ].dateHash !== null
-        ? { ...daysModel.value[ 0 ] }
-        : { ...viewModel.value } // inherit day, hours, minutes, milliseconds...
+    function emitImmediately(reason) {
+      const date =
+        daysModel.value[0] !== void 0 && daysModel.value[0].dateHash !== null
+          ? { ...daysModel.value[0] }
+          : { ...viewModel.value } // inherit day, hours, minutes, milliseconds...
 
       // nextTick required because of animation delay in viewModel
       nextTick(() => {
         date.year = viewModel.value.year
         date.month = viewModel.value.month
 
-        const maxDay = props.calendar !== 'persian'
-          ? (new Date(date.year, date.month, 0)).getDate()
-          : jalaaliMonthLength(date.year, date.month)
+        const maxDay =
+          props.calendar !== 'persian'
+            ? new Date(date.year, date.month, 0).getDate()
+            : jalaaliMonthLength(date.year, date.month)
 
         date.day = Math.min(Math.max(1, date.day), maxDay)
 
@@ -992,10 +1083,10 @@ export default createComponent({
       })
     }
 
-    function getEmitParams (action, date) {
+    function getEmitParams(action, date) {
       return date.from !== void 0
         ? {
-            reason: `${ action }-range`,
+            reason: `${action}-range`,
             details: {
               ...getShortDate(date.target),
               from: getShortDate(date.from),
@@ -1003,18 +1094,21 @@ export default createComponent({
             }
           }
         : {
-            reason: `${ action }-day`,
+            reason: `${action}-day`,
             details: getShortDate(date)
           }
     }
 
-    function encodeEntry (date, mask, locale) {
+    function encodeEntry(date, dateMask, dateLocale) {
       return date.from !== void 0
-        ? { from: encodeObjectFn.value(date.from, mask, locale), to: encodeObjectFn.value(date.to, mask, locale) }
-        : encodeObjectFn.value(date, mask, locale)
+        ? {
+            from: encodeObjectFn.value(date.from, dateMask, dateLocale),
+            to: encodeObjectFn.value(date.to, dateMask, dateLocale)
+          }
+        : encodeObjectFn.value(date, dateMask, dateLocale)
     }
 
-    function addToModel (date) {
+    function addToModel(date) {
       let value
 
       if (props.multiple === true) {
@@ -1024,28 +1118,31 @@ export default createComponent({
           const fromHash = getDayHash(date.from)
           const toHash = getDayHash(date.to)
 
-          const days = daysModel.value
-            .filter(day => day.dateHash < fromHash || day.dateHash > toHash)
+          const localDays = daysModel.value.filter(
+            day => day.dateHash < fromHash || day.dateHash > toHash
+          )
 
-          const ranges = rangeModel.value
-            .filter(({ from, to }) => to.dateHash < fromHash || from.dateHash > toHash)
+          const ranges = rangeModel.value.filter(
+            ({ from, to }) => to.dateHash < fromHash || from.dateHash > toHash
+          )
 
-          value = days.concat(ranges).concat(date).map(entry => encodeEntry(entry))
-        }
-        else {
+          value = localDays
+            .concat(ranges)
+            .concat(date)
+            .map(entry => encodeEntry(entry))
+        } else {
           const model = normalizedModel.value.slice()
           model.push(encodeEntry(date))
           value = model
         }
-      }
-      else {
+      } else {
         value = encodeEntry(date)
       }
 
       emitValue(value, 'add', date)
     }
 
-    function removeFromModel (date) {
+    function removeFromModel(date) {
       if (props.noUnset === true) return
 
       let model = null
@@ -1054,16 +1151,13 @@ export default createComponent({
         const val = encodeEntry(date)
 
         if (date.from !== void 0) {
-          model = props.modelValue.filter(
-            date => (
-              date.from !== void 0
-                ? (date.from !== val.from && date.to !== val.to)
-                : true
-            )
+          model = props.modelValue.filter(item =>
+            item.from !== void 0
+              ? item.from !== val.from && item.to !== val.to
+              : true
           )
-        }
-        else {
-          model = props.modelValue.filter(date => date !== val)
+        } else {
+          model = props.modelValue.filter(item => item !== val)
         }
 
         if (model.length === 0) {
@@ -1074,324 +1168,500 @@ export default createComponent({
       emitValue(model, 'remove', date)
     }
 
-    function updateValue (mask, locale, reason) {
+    function updateValue(dateMask, dateLocale, reason) {
       const model = daysModel.value
         .concat(rangeModel.value)
-        .map(entry => encodeEntry(entry, mask, locale))
-        .filter(entry => {
-          return entry.from !== void 0
+        .map(entry => encodeEntry(entry, dateMask, dateLocale))
+        .filter(entry =>
+          entry.from !== void 0
             ? entry.from.dateHash !== null && entry.to.dateHash !== null
             : entry.dateHash !== null
-        })
+        )
 
-      const value = (props.multiple === true ? model : model[ 0 ]) || null
+      const value = (props.multiple === true ? model : model[0]) || null
 
       setLastValue(value)
       emit('update:modelValue', value, reason)
     }
 
-    function getHeader () {
+    function getHeader() {
       if (props.minimal === true) return
 
-      return h('div', {
-        class: 'q-date__header ' + headerClass.value
-      }, [
-        h('div', {
-          class: 'relative-position'
-        }, [
-          h(Transition, {
-            name: 'q-transition--fade'
-          }, () => h('div', {
-            key: 'h-yr-' + headerSubtitle.value,
-            class: 'q-date__header-subtitle q-date__header-link '
-              + (view.value === 'Years' ? 'q-date__header-link--active' : 'cursor-pointer'),
-            tabindex: tabindex.value,
-            ...getCache('vY', {
-              onClick () { view.value = 'Years' },
-              onKeyup (e) { e.keyCode === 13 && (view.value = 'Years') }
-            })
-          }, [ headerSubtitle.value ]))
-        ]),
-
-        h('div', {
-          class: 'q-date__header-title relative-position flex no-wrap'
-        }, [
-          h('div', {
-            class: 'relative-position col'
-          }, [
-            h(Transition, {
-              name: 'q-transition--fade'
-            }, () => h('div', {
-              key: 'h-sub' + headerTitle.value,
-              class: 'q-date__header-title-label q-date__header-link '
-                + (view.value === 'Calendar' ? 'q-date__header-link--active' : 'cursor-pointer'),
-              tabindex: tabindex.value,
-              ...getCache('vC', {
-                onClick () { view.value = 'Calendar' },
-                onKeyup (e) { e.keyCode === 13 && (view.value = 'Calendar') }
-              })
-            }, [ headerTitle.value ]))
-          ]),
-
-          props.todayBtn === true ? h(QBtn, {
-            class: 'q-date__header-today self-start',
-            icon: $q.iconSet.datetime.today,
-            'aria-label': $q.lang.date.today,
-            flat: true,
-            size: 'sm',
-            round: true,
-            tabindex: tabindex.value,
-            onClick: setToday
-          }) : null
-        ])
-      ])
+      return h(
+        'div',
+        {
+          class: 'q-date__header ' + headerClass.value
+        },
+        [
+          h(
+            'div',
+            {
+              class: 'relative-position'
+            },
+            [
+              h(
+                Transition,
+                {
+                  name: 'q-transition--fade'
+                },
+                () =>
+                  h(
+                    'div',
+                    {
+                      key: 'h-yr-' + headerSubtitle.value,
+                      class:
+                        'q-date__header-subtitle q-date__header-link ' +
+                        (view.value === 'Years'
+                          ? 'q-date__header-link--active'
+                          : 'cursor-pointer'),
+                      tabindex: tabindex.value,
+                      ...getCache('vY', {
+                        onClick() {
+                          view.value = 'Years'
+                        },
+                        onKeyup(e) {
+                          if (e.keyCode === 13) {
+                            view.value = 'Years'
+                          }
+                        }
+                      })
+                    },
+                    [headerSubtitle.value]
+                  )
+              )
+            ]
+          ),
+
+          h(
+            'div',
+            {
+              class: 'q-date__header-title relative-position flex no-wrap'
+            },
+            [
+              h(
+                'div',
+                {
+                  class: 'relative-position col'
+                },
+                [
+                  h(
+                    Transition,
+                    {
+                      name: 'q-transition--fade'
+                    },
+                    () =>
+                      h(
+                        'div',
+                        {
+                          key: 'h-sub' + headerTitle.value,
+                          class:
+                            'q-date__header-title-label q-date__header-link ' +
+                            (view.value === 'Calendar'
+                              ? 'q-date__header-link--active'
+                              : 'cursor-pointer'),
+                          tabindex: tabindex.value,
+                          ...getCache('vC', {
+                            onClick() {
+                              view.value = 'Calendar'
+                            },
+                            onKeyup(e) {
+                              if (e.keyCode === 13) {
+                                view.value = 'Calendar'
+                              }
+                            }
+                          })
+                        },
+                        [headerTitle.value]
+                      )
+                  )
+                ]
+              ),
+
+              props.todayBtn === true
+                ? h(QBtn, {
+                    class: 'q-date__header-today self-start',
+                    icon: $q.iconSet.datetime.today,
+                    'aria-label': $q.lang.date.today,
+                    flat: true,
+                    size: 'sm',
+                    round: true,
+                    tabindex: tabindex.value,
+                    onClick: setToday
+                  })
+                : null
+            ]
+          )
+        ]
+      )
     }
 
-    function getNavigation ({ label, type, key, dir, goTo, boundaries, cls }) {
+    function getNavigation({ label, type, key, dir, goTo, boundaries, cls }) {
       return [
-        h('div', {
-          class: 'row items-center q-date__arrow'
-        }, [
-          h(QBtn, {
-            round: true,
-            dense: true,
-            size: 'sm',
-            flat: true,
-            icon: dateArrow.value[ 0 ],
-            'aria-label': type === 'Years' ? $q.lang.date.prevYear : $q.lang.date.prevMonth,
-            tabindex: tabindex.value,
-            disable: boundaries.prev === false,
-            ...getCache('go-#' + type, { onClick () { goTo(-1) } })
-          })
-        ]),
-
-        h('div', {
-          class: 'relative-position overflow-hidden flex flex-center' + cls
-        }, [
-          h(Transition, {
-            name: 'q-transition--jump-' + dir
-          }, () => h('div', { key }, [
+        h(
+          'div',
+          {
+            class: 'row items-center q-date__arrow'
+          },
+          [
             h(QBtn, {
+              round: true,
+              dense: true,
+              size: 'sm',
               flat: true,
+              icon: dateArrow.value[0],
+              'aria-label':
+                type === 'Years'
+                  ? $q.lang.date.prevYear
+                  : $q.lang.date.prevMonth,
+              tabindex: tabindex.value,
+              disable: boundaries.prev === false,
+              ...getCache('go-#' + type, {
+                onClick() {
+                  goTo(-1)
+                }
+              })
+            })
+          ]
+        ),
+
+        h(
+          'div',
+          {
+            class: 'relative-position overflow-hidden flex flex-center' + cls
+          },
+          [
+            h(
+              Transition,
+              {
+                name: 'q-transition--jump-' + dir
+              },
+              () =>
+                h('div', { key }, [
+                  h(QBtn, {
+                    flat: true,
+                    dense: true,
+                    noCaps: true,
+                    label,
+                    tabindex: tabindex.value,
+                    ...getCache('view#' + type, {
+                      onClick: () => {
+                        view.value = type
+                      }
+                    })
+                  })
+                ])
+            )
+          ]
+        ),
+
+        h(
+          'div',
+          {
+            class: 'row items-center q-date__arrow'
+          },
+          [
+            h(QBtn, {
+              round: true,
               dense: true,
-              noCaps: true,
-              label,
+              size: 'sm',
+              flat: true,
+              icon: dateArrow.value[1],
+              'aria-label':
+                type === 'Years'
+                  ? $q.lang.date.nextYear
+                  : $q.lang.date.nextMonth,
               tabindex: tabindex.value,
-              ...getCache('view#' + type, { onClick: () => { view.value = type } })
+              disable: boundaries.next === false,
+              ...getCache('go+#' + type, {
+                onClick() {
+                  goTo(1)
+                }
+              })
             })
-          ]))
-        ]),
-
-        h('div', {
-          class: 'row items-center q-date__arrow'
-        }, [
-          h(QBtn, {
-            round: true,
-            dense: true,
-            size: 'sm',
-            flat: true,
-            icon: dateArrow.value[ 1 ],
-            'aria-label': type === 'Years' ? $q.lang.date.nextYear : $q.lang.date.nextMonth,
-            tabindex: tabindex.value,
-            disable: boundaries.next === false,
-            ...getCache('go+#' + type, { onClick () { goTo(1) } })
-          })
-        ])
+          ]
+        )
       ]
     }
 
     const renderViews = {
-      Calendar: () => ([
-        h('div', {
-          key: 'calendar-view',
-          class: 'q-date__view q-date__calendar'
-        }, [
-          h('div', {
-            class: 'q-date__navigation row items-center no-wrap'
-          }, getNavigation({
-            label: innerLocale.value.months[ viewModel.value.month - 1 ],
-            type: 'Months',
-            key: viewModel.value.month,
-            dir: monthDirection.value,
-            goTo: goToMonth,
-            boundaries: navBoundaries.value.month,
-            cls: ' col'
-          }).concat(getNavigation({
-            label: viewModel.value.year,
-            type: 'Years',
-            key: viewModel.value.year,
-            dir: yearDirection.value,
-            goTo: goToYear,
-            boundaries: navBoundaries.value.year,
-            cls: ''
-          }))),
-
-          h('div', {
-            class: 'q-date__calendar-weekdays row items-center no-wrap'
-          }, daysOfWeek.value.map(day => h('div', { class: 'q-date__calendar-item' }, [ h('div', day) ]))),
-
-          h('div', {
-            class: 'q-date__calendar-days-container relative-position overflow-hidden'
-          }, [
-            h(Transition, {
-              name: 'q-transition--slide-' + monthDirection.value
-            }, () => h('div', {
-              key: viewMonthHash.value,
-              class: 'q-date__calendar-days fit'
-            }, days.value.map(day => h('div', { class: day.classes }, [
-              day.in === true
-                ? h(
-                  QBtn, {
-                    class: day.today === true ? 'q-date__today' : '',
-                    dense: true,
-                    flat: day.flat,
-                    unelevated: day.unelevated,
-                    color: day.color,
-                    textColor: day.textColor,
-                    label: day.i,
-                    tabindex: tabindex.value,
-                    ...getCache('day#' + day.i, {
-                      onClick: () => { onDayClick(day.i) },
-                      onMouseover: () => { onDayMouseover(day.i) }
-                    })
+      Calendar: () => [
+        h(
+          'div',
+          {
+            key: 'calendar-view',
+            class: 'q-date__view q-date__calendar'
+          },
+          [
+            h(
+              'div',
+              {
+                class: 'q-date__navigation row items-center no-wrap'
+              },
+              getNavigation({
+                label: innerLocale.value.months[viewModel.value.month - 1],
+                type: 'Months',
+                key: viewModel.value.month,
+                dir: monthDirection.value,
+                goTo: goToMonth,
+                boundaries: navBoundaries.value.month,
+                cls: ' col'
+              }).concat(
+                getNavigation({
+                  label: viewModel.value.year,
+                  type: 'Years',
+                  key: viewModel.value.year,
+                  dir: yearDirection.value,
+                  goTo: goToYear,
+                  boundaries: navBoundaries.value.year,
+                  cls: ''
+                })
+              )
+            ),
+
+            h(
+              'div',
+              {
+                class: 'q-date__calendar-weekdays row items-center no-wrap'
+              },
+              daysOfWeek.value.map(day =>
+                h('div', { class: 'q-date__calendar-item' }, [h('div', day)])
+              )
+            ),
+
+            h(
+              'div',
+              {
+                class:
+                  'q-date__calendar-days-container relative-position overflow-hidden'
+              },
+              [
+                h(
+                  Transition,
+                  {
+                    name: 'q-transition--slide-' + monthDirection.value
                   },
-                  day.event !== false
-                    ? () => h('div', { class: 'q-date__event bg-' + day.event })
-                    : null
+                  () =>
+                    h(
+                      'div',
+                      {
+                        key: viewMonthHash.value,
+                        class: 'q-date__calendar-days fit'
+                      },
+                      days.value.map(day =>
+                        h('div', { class: day.classes }, [
+                          day.in === true
+                            ? h(
+                                QBtn,
+                                {
+                                  class:
+                                    day.today === true ? 'q-date__today' : '',
+                                  dense: true,
+                                  flat: day.flat,
+                                  unelevated: day.unelevated,
+                                  color: day.color,
+                                  textColor: day.textColor,
+                                  label: day.i,
+                                  tabindex: tabindex.value,
+                                  ...getCache('day#' + day.i, {
+                                    onClick: () => {
+                                      onDayClick(day.i)
+                                    },
+                                    onMouseover: () => {
+                                      onDayMouseover(day.i)
+                                    }
+                                  })
+                                },
+                                day.event !== false
+                                  ? () =>
+                                      h('div', {
+                                        class: 'q-date__event bg-' + day.event
+                                      })
+                                  : null
+                              )
+                            : h('div', String(day.i))
+                        ])
+                      )
+                    )
                 )
-                : h('div', '' + day.i)
-            ]))))
-          ])
-        ])
-      ]),
+              ]
+            )
+          ]
+        )
+      ],
 
-      Months () {
+      Months() {
         const currentYear = viewModel.value.year === today.value.year
-        const isDisabled = month => {
-          return (
-            (minNav.value !== null && viewModel.value.year === minNav.value.year && minNav.value.month > month)
-            || (maxNav.value !== null && viewModel.value.year === maxNav.value.year && maxNav.value.month < month)
-          )
-        }
+        const isDisabled = month =>
+          (minNav.value !== null &&
+            viewModel.value.year === minNav.value.year &&
+            minNav.value.month > month) ||
+          (maxNav.value !== null &&
+            viewModel.value.year === maxNav.value.year &&
+            maxNav.value.month < month)
 
         const content = innerLocale.value.monthsShort.map((month, i) => {
           const active = viewModel.value.month === i + 1
 
-          return h('div', {
-            class: 'q-date__months-item flex flex-center'
-          }, [
-            h(QBtn, {
-              class: currentYear === true && today.value.month === i + 1 ? 'q-date__today' : null,
-              flat: active !== true,
-              label: month,
-              unelevated: active,
-              color: active === true ? computedColor.value : null,
-              textColor: active === true ? computedTextColor.value : null,
-              tabindex: tabindex.value,
-              disable: isDisabled(i + 1),
-              ...getCache('month#' + i, { onClick: () => { setMonth(i + 1) } })
-            })
-          ])
+          return h(
+            'div',
+            {
+              class: 'q-date__months-item flex flex-center'
+            },
+            [
+              h(QBtn, {
+                class:
+                  currentYear === true && today.value.month === i + 1
+                    ? 'q-date__today'
+                    : null,
+                flat: active !== true,
+                label: month,
+                unelevated: active,
+                color: active === true ? computedColor.value : null,
+                textColor: active === true ? computedTextColor.value : null,
+                tabindex: tabindex.value,
+                disable: isDisabled(i + 1),
+                ...getCache('month#' + i, {
+                  onClick: () => {
+                    setMonth(i + 1)
+                  }
+                })
+              })
+            ]
+          )
         })
 
-        props.yearsInMonthView === true && content.unshift(
-          h('div', { class: 'row no-wrap full-width' }, [
-            getNavigation({
-              label: viewModel.value.year,
-              type: 'Years',
-              key: viewModel.value.year,
-              dir: yearDirection.value,
-              goTo: goToYear,
-              boundaries: navBoundaries.value.year,
-              cls: ' col'
-            })
-          ])
-        )
+        if (props.yearsInMonthView === true) {
+          content.unshift(
+            h('div', { class: 'row no-wrap full-width' }, [
+              getNavigation({
+                label: viewModel.value.year,
+                type: 'Years',
+                key: viewModel.value.year,
+                dir: yearDirection.value,
+                goTo: goToYear,
+                boundaries: navBoundaries.value.year,
+                cls: ' col'
+              })
+            ])
+          )
+        }
 
-        return h('div', {
-          key: 'months-view',
-          class: 'q-date__view q-date__months flex flex-center'
-        }, content)
+        return h(
+          'div',
+          {
+            key: 'months-view',
+            class: 'q-date__view q-date__months flex flex-center'
+          },
+          content
+        )
       },
 
-      Years () {
-        const
-          start = startYear.value,
+      Years() {
+        const start = startYear.value,
           stop = start + yearsInterval,
           years = []
 
-        const isDisabled = year => {
-          return (
-            (minNav.value !== null && minNav.value.year > year)
-            || (maxNav.value !== null && maxNav.value.year < year)
-          )
-        }
+        const isDisabled = year =>
+          (minNav.value !== null && minNav.value.year > year) ||
+          (maxNav.value !== null && maxNav.value.year < year)
 
         for (let i = start; i <= stop; i++) {
           const active = viewModel.value.year === i
 
           years.push(
-            h('div', {
-              class: 'q-date__years-item flex flex-center'
-            }, [
-              h(QBtn, {
-                key: 'yr' + i,
-                class: today.value.year === i ? 'q-date__today' : null,
-                flat: !active,
-                label: i,
-                dense: true,
-                unelevated: active,
-                color: active === true ? computedColor.value : null,
-                textColor: active === true ? computedTextColor.value : null,
-                tabindex: tabindex.value,
-                disable: isDisabled(i),
-                ...getCache('yr#' + i, { onClick: () => { setYear(i) } })
-              })
-            ])
+            h(
+              'div',
+              {
+                class: 'q-date__years-item flex flex-center'
+              },
+              [
+                h(QBtn, {
+                  key: 'yr' + i,
+                  class: today.value.year === i ? 'q-date__today' : null,
+                  flat: !active,
+                  label: i,
+                  dense: true,
+                  unelevated: active,
+                  color: active === true ? computedColor.value : null,
+                  textColor: active === true ? computedTextColor.value : null,
+                  tabindex: tabindex.value,
+                  disable: isDisabled(i),
+                  ...getCache('yr#' + i, {
+                    onClick: () => {
+                      setYear(i)
+                    }
+                  })
+                })
+              ]
+            )
           )
         }
 
-        return h('div', {
-          class: 'q-date__view q-date__years flex flex-center'
-        }, [
-          h('div', {
-            class: 'col-auto'
-          }, [
-            h(QBtn, {
-              round: true,
-              dense: true,
-              flat: true,
-              icon: dateArrow.value[ 0 ],
-              'aria-label': $q.lang.date.prevRangeYears(yearsInterval),
-              tabindex: tabindex.value,
-              disable: isDisabled(start),
-              ...getCache('y-', { onClick: () => { startYear.value -= yearsInterval } })
-            })
-          ]),
+        return h(
+          'div',
+          {
+            class: 'q-date__view q-date__years flex flex-center'
+          },
+          [
+            h(
+              'div',
+              {
+                class: 'col-auto'
+              },
+              [
+                h(QBtn, {
+                  round: true,
+                  dense: true,
+                  flat: true,
+                  icon: dateArrow.value[0],
+                  'aria-label': $q.lang.date.prevRangeYears(yearsInterval),
+                  tabindex: tabindex.value,
+                  disable: isDisabled(start),
+                  ...getCache('y-', {
+                    onClick: () => {
+                      startYear.value -= yearsInterval
+                    }
+                  })
+                })
+              ]
+            ),
 
-          h('div', {
-            class: 'q-date__years-content col self-stretch row items-center'
-          }, years),
+            h(
+              'div',
+              {
+                class: 'q-date__years-content col self-stretch row items-center'
+              },
+              years
+            ),
 
-          h('div', {
-            class: 'col-auto'
-          }, [
-            h(QBtn, {
-              round: true,
-              dense: true,
-              flat: true,
-              icon: dateArrow.value[ 1 ],
-              'aria-label': $q.lang.date.nextRangeYears(yearsInterval),
-              tabindex: tabindex.value,
-              disable: isDisabled(stop),
-              ...getCache('y+', { onClick: () => { startYear.value += yearsInterval } })
-            })
-          ])
-        ])
+            h(
+              'div',
+              {
+                class: 'col-auto'
+              },
+              [
+                h(QBtn, {
+                  round: true,
+                  dense: true,
+                  flat: true,
+                  icon: dateArrow.value[1],
+                  'aria-label': $q.lang.date.nextRangeYears(yearsInterval),
+                  tabindex: tabindex.value,
+                  disable: isDisabled(stop),
+                  ...getCache('y+', {
+                    onClick: () => {
+                      startYear.value += yearsInterval
+                    }
+                  })
+                })
+              ]
+            )
+          ]
+        )
       }
     }
 
-    function onDayClick (dayIndex) {
+    function onDayClick(dayIndex) {
       const day = { ...viewModel.value, day: dayIndex }
 
       if (props.range === false) {
@@ -1400,10 +1670,16 @@ export default createComponent({
       }
 
       if (editRange.value === null) {
-        const dayProps = days.value.find(day => day.fill !== true && day.i === dayIndex)
+        const dayProps = days.value.find(
+          item => item.fill !== true && item.i === dayIndex
+        )
 
         if (props.noUnset !== true && dayProps.range !== void 0) {
-          removeFromModel({ target: day, from: dayProps.range.from, to: dayProps.range.to })
+          removeFromModel({
+            target: day,
+            from: dayProps.range.from,
+            to: dayProps.range.to
+          })
           return
         }
 
@@ -1422,14 +1698,13 @@ export default createComponent({
         }
 
         emit('rangeStart', getShortDate(day))
-      }
-      else {
-        const
-          initHash = editRange.value.initHash,
+      } else {
+        const initHash = editRange.value.initHash,
           finalHash = getDayHash(day),
-          payload = initHash <= finalHash
-            ? { from: editRange.value.init, to: day }
-            : { from: day, to: editRange.value.init }
+          payload =
+            initHash <= finalHash
+              ? { from: editRange.value.init, to: day }
+              : { from: day, to: editRange.value.init }
 
         editRange.value = null
         addToModel(initHash === finalHash ? day : { target: day, ...payload })
@@ -1441,7 +1716,7 @@ export default createComponent({
       }
     }
 
-    function onDayMouseover (dayIndex) {
+    function onDayMouseover(dayIndex) {
       if (editRange.value !== null) {
         const final = { ...viewModel.value, day: dayIndex }
 
@@ -1454,41 +1729,61 @@ export default createComponent({
 
     // expose public methods
     Object.assign(proxy, {
-      setToday, setView, offsetCalendar, setCalendarTo, setEditingRange
+      setToday,
+      setView,
+      offsetCalendar,
+      setCalendarTo,
+      setEditingRange
     })
 
     return () => {
       const content = [
-        h('div', {
-          class: 'q-date__content col relative-position'
-        }, [
-          h(Transition, {
-            name: 'q-transition--fade'
-          }, renderViews[ view.value ])
-        ])
+        h(
+          'div',
+          {
+            class: 'q-date__content col relative-position'
+          },
+          [
+            h(
+              Transition,
+              {
+                name: 'q-transition--fade'
+              },
+              renderViews[view.value]
+            )
+          ]
+        )
       ]
 
       const def = hSlot(slots.default)
-      def !== void 0 && content.push(
-        h('div', { class: 'q-date__actions' }, def)
-      )
+      if (def !== void 0) {
+        content.push(h('div', { class: 'q-date__actions' }, def))
+      }
 
       if (props.name !== void 0 && props.disable !== true) {
         injectFormInput(content, 'push')
       }
 
-      return h('div', {
-        class: classes.value,
-        ...attributes.value
-      }, [
-        getHeader(),
-
-        h('div', {
-          ref: blurTargetRef,
-          class: 'q-date__main col column',
-          tabindex: -1
-        }, content)
-      ])
+      return h(
+        'div',
+        {
+          class: classes.value,
+          ...attributes.value
+        },
+        [
+          getHeader(),
+
+          h(
+            'div',
+            {
+              ref: blurTargetRef,
+              class: 'q-date__main col column',
+              tabindex: -1
+            },
+            content
+          )
+        ]
+      )
     }
   }
 })