@kokoccc/vuetify 1.0.1

package/src/components/VDatePicker/VDatePicker.ts

@@ -0,0 +1,539 @@
+// Components
+import VDatePickerTitle from './VDatePickerTitle'
+import VDatePickerHeader from './VDatePickerHeader'
+import VDatePickerDateTable from './VDatePickerDateTable'
+import VDatePickerMonthTable from './VDatePickerMonthTable'
+import VDatePickerYears from './VDatePickerYears'
+
+// Mixins
+import Localable from '../../mixins/localable'
+import Picker from '../../mixins/picker'
+
+// Utils
+import isDateAllowed from './util/isDateAllowed'
+import mixins from '../../util/mixins'
+import { wrapInArray } from '../../util/helpers'
+import { daysInMonth } from '../VCalendar/util/timestamp'
+import { consoleWarn, breaking } from '../../util/console'
+import {
+  createItemTypeListeners,
+  createNativeLocaleFormatter,
+  pad,
+  sanitizeDateString,
+} from './util'
+
+// Types
+import {
+  PropType,
+  PropValidator,
+} from 'vue/types/options'
+import { VNode, h } from 'vue'
+import {
+  DatePickerFormatter,
+  DatePickerMultipleFormatter,
+  DatePickerAllowedDatesFunction,
+  DatePickerEventColors,
+  DatePickerEvents,
+  DatePickerType,
+} from 'vuetify/types'
+
+type DatePickerValue = string | string[] | undefined
+interface Formatters {
+  year: DatePickerFormatter
+  titleDate: DatePickerFormatter | DatePickerMultipleFormatter
+}
+
+type ActivePicker = 'DATE' | 'MONTH' | 'YEAR';
+
+export default mixins(
+  Localable,
+  Picker,
+/* @vue/component */
+).extend({
+  name: 'v-date-picker',
+
+  props: {
+    activePicker: String as PropType<ActivePicker>,
+    allowedDates: Function as PropType<DatePickerAllowedDatesFunction | undefined>,
+    // Function formatting the day in date picker table
+    dayFormat: Function as PropType<DatePickerAllowedDatesFunction | undefined>,
+    disabled: Boolean,
+    events: {
+      type: [Array, Function, Object],
+      default: () => null,
+    } as PropValidator<DatePickerEvents | null>,
+    eventColor: {
+      type: [Array, Function, Object, String],
+      default: () => 'warning',
+    } as PropValidator<DatePickerEventColors>,
+    firstDayOfWeek: {
+      type: [String, Number],
+      default: 0,
+    },
+    // Function formatting the tableDate in the day/month table header
+    headerDateFormat: Function as PropType<DatePickerFormatter | undefined>,
+    localeFirstDayOfYear: {
+      type: [String, Number],
+      default: 0,
+    },
+    max: String,
+    min: String,
+    // Function formatting month in the months table
+    monthFormat: Function as PropType<DatePickerFormatter | undefined>,
+    multiple: Boolean,
+    nextIcon: {
+      type: String,
+      default: '$next',
+    },
+    nextMonthAriaLabel: {
+      type: String,
+      default: '$vuetify.datePicker.nextMonthAriaLabel',
+    },
+    nextYearAriaLabel: {
+      type: String,
+      default: '$vuetify.datePicker.nextYearAriaLabel',
+    },
+    pickerDate: String,
+    prevIcon: {
+      type: String,
+      default: '$prev',
+    },
+    prevMonthAriaLabel: {
+      type: String,
+      default: '$vuetify.datePicker.prevMonthAriaLabel',
+    },
+    prevYearAriaLabel: {
+      type: String,
+      default: '$vuetify.datePicker.prevYearAriaLabel',
+    },
+    range: Boolean,
+    reactive: Boolean,
+    readonly: Boolean,
+    scrollable: Boolean,
+    showCurrent: {
+      type: [Boolean, String],
+      default: true,
+    },
+    selectedItemsText: {
+      type: String,
+      default: '$vuetify.datePicker.itemsSelected',
+    },
+    showAdjacentMonths: Boolean,
+    showWeek: Boolean,
+    // Function formatting currently selected date in the picker title
+    titleDateFormat: Function as PropType<DatePickerFormatter | DatePickerMultipleFormatter | undefined>,
+    type: {
+      type: String,
+      default: 'date',
+      validator: (type: any) => ['date', 'month'].includes(type), // TODO: year
+    } as PropValidator<DatePickerType>,
+    modelValue: [Array, String] as PropType<DatePickerValue>,
+    weekdayFormat: Function as PropType<DatePickerFormatter | undefined>,
+    // Function formatting the year in table header and pickup title
+    yearFormat: Function as PropType<DatePickerFormatter | undefined>,
+    yearIcon: String,
+  },
+
+  emits: [
+    'update:modelValue',
+    'change',
+    'update:active-picker',
+    'update:picker-date',
+  ],
+
+  data () {
+    const now = new Date()
+    return {
+      internalActivePicker: this.type.toUpperCase(),
+      inputDay: null as number | null,
+      inputMonth: null as number | null,
+      inputYear: null as number | null,
+      isReversing: false,
+      now,
+      // tableDate is a string in 'YYYY' / 'YYYY-M' format (leading zero for month is not required)
+      tableDate: (() => {
+        if (this.pickerDate) {
+          return this.pickerDate
+        }
+
+        const multipleValue = wrapInArray(this.modelValue)
+        const date = multipleValue[multipleValue.length - 1] ||
+          (typeof this.showCurrent === 'string' ? this.showCurrent : `${now.getFullYear()}-${now.getMonth() + 1}`)
+        return sanitizeDateString(date as string, this.type === 'date' ? 'month' : 'year')
+      })(),
+    }
+  },
+
+  computed: {
+    multipleValue (): string[] {
+      return wrapInArray(this.modelValue)
+    },
+    isMultiple (): boolean {
+      return this.multiple || this.range
+    },
+    lastValue (): string | null {
+      return this.isMultiple ? this.multipleValue[this.multipleValue.length - 1] : (this.modelValue as string | null)
+    },
+    selectedMonths (): string | string[] | undefined {
+      if (!this.modelValue || this.type === 'month') {
+        return this.modelValue
+      } else if (this.isMultiple) {
+        return this.multipleValue.map(val => val.substr(0, 7))
+      } else {
+        return (this.modelValue as string).substr(0, 7)
+      }
+    },
+    current (): string | null {
+      if (this.showCurrent === true) {
+        return sanitizeDateString(`${this.now.getFullYear()}-${this.now.getMonth() + 1}-${this.now.getDate()}`, this.type)
+      }
+
+      return this.showCurrent || null
+    },
+    inputDate (): string {
+      return this.type === 'date'
+        ? `${this.inputYear}-${pad(this.inputMonth! + 1)}-${pad(this.inputDay!)}`
+        : `${this.inputYear}-${pad(this.inputMonth! + 1)}`
+    },
+    tableMonth (): number {
+      return Number((this.pickerDate || this.tableDate).split('-')[1]) - 1
+    },
+    tableYear (): number {
+      return Number((this.pickerDate || this.tableDate).split('-')[0])
+    },
+    minMonth (): string | null {
+      return this.min ? sanitizeDateString(this.min, 'month') : null
+    },
+    maxMonth (): string | null {
+      return this.max ? sanitizeDateString(this.max, 'month') : null
+    },
+    minYear (): string | null {
+      return this.min ? sanitizeDateString(this.min, 'year') : null
+    },
+    maxYear (): string | null {
+      return this.max ? sanitizeDateString(this.max, 'year') : null
+    },
+    formatters (): Formatters {
+      return {
+        year: this.yearFormat || createNativeLocaleFormatter(this.currentLocale, { year: 'numeric', timeZone: 'UTC' }, { length: 4 }),
+        titleDate: this.titleDateFormat ||
+          (this.isMultiple ? this.defaultTitleMultipleDateFormatter : this.defaultTitleDateFormatter),
+      }
+    },
+    defaultTitleMultipleDateFormatter (): DatePickerMultipleFormatter {
+      return dates => {
+        if (!dates.length) {
+          return '-'
+        }
+
+        if (dates.length === 1) {
+          return this.defaultTitleDateFormatter(dates[0])
+        }
+
+        return this.$vuetify.lang.t(this.selectedItemsText, dates.length)
+      }
+    },
+    defaultTitleDateFormatter (): DatePickerFormatter {
+      const titleFormats = {
+        year: { year: 'numeric', timeZone: 'UTC' },
+        month: { month: 'long', timeZone: 'UTC' },
+        date: { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' },
+      } as const
+
+      const titleDateFormatter = createNativeLocaleFormatter(this.currentLocale, titleFormats[this.type], {
+        start: 0,
+        length: { date: 10, month: 7, year: 4 }[this.type],
+      })
+
+      const landscapeFormatter = (date: string) => titleDateFormatter(date)
+        .replace(/([^\d\s])([\d])/g, (match, nonDigit, digit) => `${nonDigit} ${digit}`)
+        .replace(', ', ',<br>')
+
+      return this.landscape ? landscapeFormatter : titleDateFormatter
+    },
+  },
+
+  watch: {
+    internalActivePicker: {
+      immediate: true,
+      handler (val: ActivePicker) {
+        this.$emit('update:active-picker', val)
+      },
+    },
+    activePicker (val: ActivePicker) {
+      this.internalActivePicker = val
+    },
+    tableDate (val: string, prev: string) {
+      // Make a ISO 8601 strings from val and prev for comparision, otherwise it will incorrectly
+      // compare for example '2000-9' and '2000-10'
+      const sanitizeType = this.type === 'month' ? 'year' : 'month'
+      this.isReversing = sanitizeDateString(val, sanitizeType) < sanitizeDateString(prev, sanitizeType)
+      this.$emit('update:picker-date', val)
+    },
+    pickerDate (val: string | null) {
+      if (val) {
+        this.tableDate = val
+      } else if (this.lastValue && this.type === 'date') {
+        this.tableDate = sanitizeDateString(this.lastValue, 'month')
+      } else if (this.lastValue && this.type === 'month') {
+        this.tableDate = sanitizeDateString(this.lastValue, 'year')
+      }
+    },
+    modelValue (newValue: DatePickerValue, oldValue: DatePickerValue) {
+      this.checkMultipleProp()
+      this.setInputDate()
+
+      if (
+        (!this.isMultiple && this.modelValue && !this.pickerDate) ||
+        (this.isMultiple && this.multipleValue.length && (!oldValue || !oldValue.length) && !this.pickerDate)
+      ) {
+        this.tableDate = sanitizeDateString(this.inputDate, this.type === 'month' ? 'year' : 'month')
+      }
+    },
+    type (type: DatePickerType) {
+      this.internalActivePicker = type.toUpperCase()
+
+      if (this.modelValue && this.modelValue.length) {
+        const output = this.multipleValue
+          .map((val: string) => sanitizeDateString(val, type))
+          .filter(this.isDateAllowed)
+        this.$emit('update:modelValue', this.isMultiple ? output : output[0])
+      }
+    },
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
+    this.checkMultipleProp()
+
+    if (this.pickerDate !== this.tableDate) {
+      this.$emit('update:picker-date', this.tableDate)
+    }
+    this.setInputDate()
+  },
+
+  methods: {
+    save () {
+      // Метод для совместимости с Picker mixin
+      // В VDatePicker нет необходимости в отдельном сохранении
+    },
+    cancel () {
+      // Метод для совместимости с Picker mixin
+      // В VDatePicker нет необходимости в отдельной отмене
+    },
+    emitInput (newInput: string) {
+      if (this.range) {
+        if (this.multipleValue.length !== 1) {
+          this.$emit('update:modelValue', [newInput])
+        } else {
+          const output = [this.multipleValue[0], newInput]
+          this.$emit('update:modelValue', output)
+          this.$emit('change', output)
+        }
+        return
+      }
+
+      const output = this.multiple
+        ? (
+          this.multipleValue.indexOf(newInput) === -1
+            ? this.multipleValue.concat([newInput])
+            : this.multipleValue.filter(x => x !== newInput)
+        )
+        : newInput
+
+      this.$emit('update:modelValue', output)
+      this.multiple || this.$emit('change', newInput)
+    },
+    checkMultipleProp () {
+      if (this.modelValue == null) return
+      const valueType = this.modelValue.constructor.name
+      const expected = this.isMultiple ? 'Array' : 'String'
+      if (valueType !== expected) {
+        consoleWarn(`Value must be ${this.isMultiple ? 'an' : 'a'} ${expected}, got ${valueType}`, this)
+      }
+    },
+    isDateAllowed (value: string): boolean {
+      return isDateAllowed(value, this.min, this.max, this.allowedDates)
+    },
+    yearClick (value: number) {
+      this.inputYear = value
+      if (this.type === 'month') {
+        this.tableDate = `${value}`
+      } else {
+        this.tableDate = `${value}-${pad((this.tableMonth || 0) + 1)}`
+      }
+      this.internalActivePicker = 'MONTH'
+      if (this.reactive && !this.readonly && !this.isMultiple && this.isDateAllowed(this.inputDate)) {
+        this.$emit('update:modelValue', this.inputDate)
+      }
+    },
+    monthClick (value: string) {
+      const [year, month] = value.split('-')
+
+      this.inputYear = parseInt(year, 10)
+      this.inputMonth = parseInt(month, 10) - 1
+
+      if (this.type === 'date') {
+        if (this.inputDay) {
+          this.inputDay = Math.min(this.inputDay, daysInMonth(this.inputYear, this.inputMonth + 1))
+        }
+
+        this.tableDate = value
+        this.internalActivePicker = 'DATE'
+        if (this.reactive && !this.readonly && !this.isMultiple && this.isDateAllowed(this.inputDate)) {
+          this.$emit('update:modelValue', this.inputDate)
+        }
+      } else {
+        this.emitInput(this.inputDate)
+      }
+    },
+    dateClick (value: string) {
+      const [year, month, day] = value.split('-')
+
+      this.inputYear = parseInt(year, 10)
+      this.inputMonth = parseInt(month, 10) - 1
+      this.inputDay = parseInt(day, 10)
+
+      this.emitInput(this.inputDate)
+    },
+    genPickerTitle (): VNode {
+      const dateValue = this.modelValue ? (this.formatters.titleDate as (value: any) => string)(this.isMultiple ? this.multipleValue : this.modelValue) : ''
+      return h(VDatePickerTitle, {
+        date: dateValue,
+        disabled: this.disabled,
+        readonly: this.readonly,
+        selectingYear: this.internalActivePicker === 'YEAR',
+        year: this.formatters.year(this.multipleValue.length ? `${this.inputYear}` : this.tableDate),
+        yearIcon: this.yearIcon,
+        modelValue: this.multipleValue.length ? this.multipleValue[0] : undefined,
+        'onUpdate:selecting-year': (value: boolean) => this.internalActivePicker = value ? 'YEAR' : this.type.toUpperCase(),
+      })
+    },
+    genTableHeader (): VNode {
+      return h(VDatePickerHeader, {
+        nextIcon: this.nextIcon,
+        color: this.color,
+        dark: this.dark,
+        disabled: this.disabled,
+        format: this.headerDateFormat,
+        light: this.light,
+        locale: this.locale,
+        min: this.internalActivePicker === 'DATE' ? this.minMonth : this.minYear,
+        max: this.internalActivePicker === 'DATE' ? this.maxMonth : this.maxYear,
+        nextAriaLabel: this.internalActivePicker === 'DATE' ? this.nextMonthAriaLabel : this.nextYearAriaLabel,
+        prevAriaLabel: this.internalActivePicker === 'DATE' ? this.prevMonthAriaLabel : this.prevYearAriaLabel,
+        prevIcon: this.prevIcon,
+        readonly: this.readonly,
+        modelValue: this.internalActivePicker === 'DATE' ? `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}` : `${pad(this.tableYear, 4)}`,
+        onToggle: () => this.internalActivePicker = (this.internalActivePicker === 'DATE' ? 'MONTH' : 'YEAR'),
+        'onUpdate:modelValue': (value: string) => this.tableDate = value,
+      })
+    },
+    genDateTable (): VNode {
+      return h(VDatePickerDateTable, {
+        allowedDates: this.allowedDates,
+        color: this.color,
+        current: this.current,
+        dark: this.dark,
+        disabled: this.disabled,
+        events: this.events,
+        eventColor: this.eventColor,
+        firstDayOfWeek: this.firstDayOfWeek,
+        format: this.dayFormat,
+        light: this.light,
+        locale: this.locale,
+        localeFirstDayOfYear: this.localeFirstDayOfYear,
+        min: this.min,
+        max: this.max,
+        range: this.range,
+        readonly: this.readonly,
+        scrollable: this.scrollable,
+        showAdjacentMonths: this.showAdjacentMonths,
+        showWeek: this.showWeek,
+        tableDate: `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}`,
+        modelValue: this.modelValue,
+        weekdayFormat: this.weekdayFormat,
+        ref: 'table',
+        'onUpdate:modelValue': this.dateClick,
+        'onUpdate:table-date': (value: string) => this.tableDate = value,
+        ...createItemTypeListeners(this, 'Date'),
+      })
+    },
+    genMonthTable (): VNode {
+      return h(VDatePickerMonthTable, {
+        allowedDates: this.type === 'month' ? this.allowedDates : null,
+        color: this.color,
+        current: this.current ? sanitizeDateString(this.current, 'month') : null,
+        dark: this.dark,
+        disabled: this.disabled,
+        events: this.type === 'month' ? this.events : null,
+        eventColor: this.type === 'month' ? this.eventColor : null,
+        format: this.monthFormat,
+        light: this.light,
+        locale: this.locale,
+        min: this.minMonth,
+        max: this.maxMonth,
+        range: this.range,
+        readonly: this.readonly && this.type === 'month',
+        scrollable: this.scrollable,
+        modelValue: this.selectedMonths,
+        tableDate: `${pad(this.tableYear, 4)}`,
+        ref: 'table',
+        'onUpdate:modelValue': this.monthClick,
+        'onUpdate:table-date': (value: string) => this.tableDate = value,
+        ...createItemTypeListeners(this, 'Month'),
+      })
+    },
+    genYears (): VNode {
+      return h(VDatePickerYears, {
+        color: this.color,
+        format: this.yearFormat,
+        locale: this.locale,
+        min: this.minYear,
+        max: this.maxYear,
+        modelValue: this.tableYear,
+        'onUpdate:modelValue': this.yearClick,
+        ...createItemTypeListeners(this, 'Year'),
+      })
+    },
+    genPickerBody (): VNode {
+      const children = this.internalActivePicker === 'YEAR' ? [
+        this.genYears(),
+      ] : [
+        this.genTableHeader(),
+        this.internalActivePicker === 'DATE' ? this.genDateTable() : this.genMonthTable(),
+      ]
+
+      return h('div', {
+        key: this.internalActivePicker,
+      }, children)
+    },
+    setInputDate () {
+      if (this.lastValue) {
+        const array = this.lastValue.split('-')
+        this.inputYear = parseInt(array[0], 10)
+        this.inputMonth = parseInt(array[1], 10) - 1
+        if (this.type === 'date') {
+          this.inputDay = parseInt(array[2], 10)
+        }
+      } else {
+        this.inputYear = this.inputYear || this.now.getFullYear()
+        this.inputMonth = this.inputMonth == null ? this.inputMonth : this.now.getMonth()
+        this.inputDay = this.inputDay || this.now.getDate()
+      }
+    },
+  },
+
+  render (): VNode {
+    return this.genPicker('v-picker--date')
+  },
+})

package/src/components/VDatePicker/VDatePickerDateTable.ts

@@ -0,0 +1,154 @@
+// Mixins
+import DatePickerTable from './mixins/date-picker-table'
+
+// Utils
+import { weekNumber } from '../../util/dateTimeUtils'
+import { pad, createNativeLocaleFormatter, monthChange } from './util'
+import { createRange } from '../../util/helpers'
+import mixins from '../../util/mixins'
+
+// Types
+import { VNode, VNodeChildren, PropType, h } from 'vue'
+import { DatePickerFormatter } from 'vuetify/types'
+
+export default mixins(
+  DatePickerTable
+/* @vue/component */
+).extend({
+  name: 'v-date-picker-date-table',
+
+  props: {
+    firstDayOfWeek: {
+      type: [String, Number],
+      default: 0,
+    },
+    localeFirstDayOfYear: {
+      type: [String, Number],
+      default: 0,
+    },
+    showAdjacentMonths: Boolean,
+    showWeek: Boolean,
+    weekdayFormat: Function as PropType<DatePickerFormatter | undefined>,
+  },
+
+  computed: {
+    formatter (): DatePickerFormatter {
+      return this.format || createNativeLocaleFormatter(this.currentLocale, { day: 'numeric', timeZone: 'UTC' }, { start: 8, length: 2 })
+    },
+    weekdayFormatter (): DatePickerFormatter | undefined {
+      return this.weekdayFormat || createNativeLocaleFormatter(this.currentLocale, { weekday: 'narrow', timeZone: 'UTC' })
+    },
+    weekDays (): string[] {
+      const first = parseInt(this.firstDayOfWeek, 10)
+
+      return this.weekdayFormatter
+        ? createRange(7).map(i => this.weekdayFormatter!(`2017-01-${first + i + 15}`)) // 2017-01-15 is Sunday
+        : createRange(7).map(i => ['S', 'M', 'T', 'W', 'T', 'F', 'S'][(i + first) % 7])
+    },
+  },
+
+  methods: {
+    calculateTableDate (delta: number) {
+      return monthChange(this.tableDate, Math.sign(delta || 1))
+    },
+    genTHead () {
+      const days = this.weekDays.map(day => h('th', day))
+      if (this.showWeek) {
+        days.unshift(h('th'))
+      }
+
+      return h('thead', this.genTR(days))
+    },
+    // Returns number of the days from the firstDayOfWeek to the first day of the current month
+    weekDaysBeforeFirstDayOfTheMonth () {
+      const firstDayOfTheMonth = new Date(`${this.displayedYear}-${pad(this.displayedMonth + 1)}-01T00:00:00+00:00`)
+      const weekDay = firstDayOfTheMonth.getUTCDay()
+
+      return (weekDay - parseInt(this.firstDayOfWeek) + 7) % 7
+    },
+    getWeekNumber (dayInMonth: number) {
+      return weekNumber(
+        this.displayedYear,
+        this.displayedMonth,
+        dayInMonth,
+        parseInt(this.firstDayOfWeek),
+        parseInt(this.localeFirstDayOfYear)
+      )
+    },
+    genWeekNumber (weekNumber: number) {
+      return h('td', [
+        h('small', {
+          class: 'v-date-picker-table--date__week',
+        }, String(weekNumber).padStart(2, '0')),
+      ])
+    },
+    // eslint-disable-next-line max-statements
+    genTBody () {
+      const children = []
+      const daysInMonth = new Date(this.displayedYear, this.displayedMonth + 1, 0).getDate()
+      let rows = []
+      let day = this.weekDaysBeforeFirstDayOfTheMonth()
+
+      if (this.showWeek) {
+        rows.push(this.genWeekNumber(this.getWeekNumber(1)))
+      }
+
+      const prevMonthYear = this.displayedMonth ? this.displayedYear : this.displayedYear - 1
+      const prevMonth = (this.displayedMonth + 11) % 12
+      const firstDayFromPreviousMonth = new Date(this.displayedYear, this.displayedMonth, 0).getDate()
+      const cellsInRow = this.showWeek ? 8 : 7
+
+      while (day--) {
+        const date = `${prevMonthYear}-${pad(prevMonth + 1)}-${pad(firstDayFromPreviousMonth - day)}`
+
+        rows.push(h('td', this.showAdjacentMonths ? [
+          this.genButton(date, true, 'date', this.formatter, true),
+        ] : []))
+      }
+
+      for (day = 1; day <= daysInMonth; day++) {
+        const date = `${this.displayedYear}-${pad(this.displayedMonth + 1)}-${pad(day)}`
+
+        rows.push(h('td', [
+          this.genButton(date, true, 'date', this.formatter),
+        ]))
+
+        if (rows.length % cellsInRow === 0) {
+          children.push(this.genTR(rows))
+          rows = []
+          if (this.showWeek && (day < daysInMonth || this.showAdjacentMonths)) {
+            rows.push(this.genWeekNumber(this.getWeekNumber(day + 7)))
+          }
+        }
+      }
+
+      const nextMonthYear = this.displayedMonth === 11 ? this.displayedYear + 1 : this.displayedYear
+      const nextMonth = (this.displayedMonth + 1) % 12
+      let nextMonthDay = 1
+
+      while (rows.length < cellsInRow) {
+        const date = `${nextMonthYear}-${pad(nextMonth + 1)}-${pad(nextMonthDay++)}`
+
+        rows.push(h('td', this.showAdjacentMonths ? [
+          this.genButton(date, true, 'date', this.formatter, true),
+        ] : []))
+      }
+
+      if (rows.length) {
+        children.push(this.genTR(rows))
+      }
+
+      return h('tbody', children)
+    },
+    genTR (children: VNodeChildren) {
+      return [h('tr', children)]
+    },
+  },
+
+  render (): VNode {
+    return this.genTable('v-date-picker-table v-date-picker-table--date', [
+      this.genTHead(),
+      this.genTBody(),
+    ], this.calculateTableDate)
+  },
+})