'use strict'

Object.defineProperty(exports, '__esModule', { value: true })

const vue = require('vue')
const dayjs = require('dayjs')
const timePicker = require('../MytTimePicker')
const locale = require('element-plus/lib/locale')
const ElInput = require('element-plus/lib/el-input')
const directives = require('element-plus/lib/directives')
const aria = require('element-plus/lib/utils/aria')
const ElButton = require('element-plus/lib/el-button')
const util = require('element-plus/lib/utils/util')
const dom = require('element-plus/lib/utils/dom')
const customParseFormat = require('dayjs/plugin/customParseFormat')
const advancedFormat = require('dayjs/plugin/advancedFormat')
const localeData = require('dayjs/plugin/localeData')
const weekOfYear = require('dayjs/plugin/weekOfYear')
const weekYear = require('dayjs/plugin/weekYear')
const dayOfYear = require('dayjs/plugin/dayOfYear')
const isSameOrAfter = require('dayjs/plugin/isSameOrAfter')
const isSameOrBefore = require('dayjs/plugin/isSameOrBefore')

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e } }

const dayjs__default = /* #__PURE__ */_interopDefaultLegacy(window.$dayJs)
const ElInput__default = /* #__PURE__ */_interopDefaultLegacy(ElInput)
const ElButton__default = /* #__PURE__ */_interopDefaultLegacy(ElButton)
const customParseFormat__default = /* #__PURE__ */_interopDefaultLegacy(customParseFormat)
const advancedFormat__default = /* #__PURE__ */_interopDefaultLegacy(advancedFormat)
const localeData__default = /* #__PURE__ */_interopDefaultLegacy(localeData)
const weekOfYear__default = /* #__PURE__ */_interopDefaultLegacy(weekOfYear)
const weekYear__default = /* #__PURE__ */_interopDefaultLegacy(weekYear)
const dayOfYear__default = /* #__PURE__ */_interopDefaultLegacy(dayOfYear)
const isSameOrAfter__default = /* #__PURE__ */_interopDefaultLegacy(isSameOrAfter)
const isSameOrBefore__default = /* #__PURE__ */_interopDefaultLegacy(isSameOrBefore)

const script = vue.defineComponent({
  props: {
    date: {
      type: Object
    },
    minDate: {
      type: Object
    },
    maxDate: {
      type: Object
    },
    parsedValue: {
      type: [Object, Array]
    },
    selectionMode: {
      type: String,
      default: 'day'
    },
    showWeekNumber: {
      type: Boolean,
      default: false
    },
    disabledDate: {
      type: Function
    },
    cellClassName: {
      type: Function
    },
    rangeState: {
      type: Object,
      default: () => ({
        endDate: null,
        selecting: false
      })
    }
  },
  emits: ['changerange', 'pick', 'select'],
  setup (props, ctx) {
    const lastRow = vue.ref(null)
    const lastColumn = vue.ref(null)
    const tableRows = vue.ref([[], [], [], [], [], []])
    const firstDayOfWeek = props.date.$locale().weekStart || 7
    const WEEKS_CONSTANT = props.date.locale('en').localeData().weekdaysShort().map(_ => _.toLowerCase())
    const offsetDay = vue.computed(() => {
      return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek
    })
    const startDate = vue.computed(() => {
      const startDayOfMonth = props.date.startOf('month')
      return startDayOfMonth.subtract(startDayOfMonth.day() || 7, 'day')
    })
    const WEEKS = vue.computed(() => {
      return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(firstDayOfWeek, firstDayOfWeek + 7)
    })
    const rows = vue.computed(() => {
      let _a
      const startOfMonth = props.date.startOf('month')
      const startOfMonthDay = startOfMonth.day() || 7
      const dateCountOfMonth = startOfMonth.daysInMonth()
      const dateCountOfLastMonth = startOfMonth.subtract(1, 'month').daysInMonth()
      const offset = offsetDay.value
      const rows_ = tableRows.value
      let count = 1
      const selectedDate = props.selectionMode === 'dates' ? util.coerceTruthyValueToArray(props.parsedValue) : []
      const calNow = dayjs__default.default.tz().startOf('day')
      for (let i = 0; i < 6; i++) {
        const row = rows_[i]
        if (props.showWeekNumber) {
          if (!row[0]) {
            row[0] = {
              type: 'week',
              text: startDate.value.add(i * 7 + 1, 'day').week()
            }
          }
        }
        for (let j = 0; j < 7; j++) {
          let cell = row[props.showWeekNumber ? j + 1 : j]
          if (!cell) {
            cell = {
              row: i,
              column: j,
              type: 'normal',
              inRange: false,
              start: false,
              end: false
            }
          }
          const index = i * 7 + j
          const calTime = startDate.value.add(index - offset, 'day')
          cell.type = 'normal'
          const calEndDate = props.rangeState.endDate || props.maxDate ||
                        props.rangeState.selecting && props.minDate
          cell.inRange = (props.minDate &&
                        calTime.isSameOrAfter(props.minDate, 'day')) && (calEndDate &&
                        calTime.isSameOrBefore(calEndDate, 'day')) || (props.minDate &&
                        calTime.isSameOrBefore(props.minDate, 'day')) && (calEndDate &&
                        calTime.isSameOrAfter(calEndDate, 'day'))
          if ((_a = props.minDate) === null || _a === void 0 ? void 0 : _a.isSameOrAfter(calEndDate)) {
            cell.start = calEndDate && calTime.isSame(calEndDate, 'day')
            cell.end = props.minDate && calTime.isSame(props.minDate, 'day')
          } else {
            cell.start = props.minDate && calTime.isSame(props.minDate, 'day')
            cell.end = calEndDate && calTime.isSame(calEndDate, 'day')
          }
          const isToday = calTime.isSame(calNow, 'day')
          if (isToday) {
            cell.type = 'today'
          }
          if (i >= 0 && i <= 1) {
            const numberOfDaysFromPreviousMonth = startOfMonthDay + offset < 0 ? 7 + startOfMonthDay + offset : startOfMonthDay + offset
            if (j + i * 7 >= numberOfDaysFromPreviousMonth) {
              cell.text = count++
            } else {
              cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - j % 7) + 1 + i * 7
              cell.type = 'prev-month'
            }
          } else {
            if (count <= dateCountOfMonth) {
              cell.text = count++
            } else {
              cell.text = count++ - dateCountOfMonth
              cell.type = 'next-month'
            }
          }
          const cellDate = calTime.toDate()
          cell.selected = selectedDate.find(_ => _.valueOf() === calTime.valueOf())
          cell.disabled = props.disabledDate && props.disabledDate(cellDate)
          cell.customClass = props.cellClassName && props.cellClassName(cellDate)
          row[props.showWeekNumber ? j + 1 : j] = cell
        }
        if (props.selectionMode === 'week') {
          const start = props.showWeekNumber ? 1 : 0
          const end = props.showWeekNumber ? 7 : 6
          const isActive = isWeekActive(row[start + 1])
          row[start].inRange = isActive
          row[start].start = isActive
          row[end].inRange = isActive
          row[end].end = isActive
        }
      }
      return rows_
    })
    const cellMatchesDate = (cell, date) => {
      if (!date) { return false }
      return dayjs__default.default.tz(date)
        .isSame(props.date.date(Number(cell.text)), 'day')
    }
    const getCellClasses = cell => {
      const classes = []
      if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {
        classes.push('available')
        if (cell.type === 'today') {
          classes.push('today')
        }
      } else {
        classes.push(cell.type)
      }
      if (props.selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && cellMatchesDate(cell, props.parsedValue)) {
        classes.push('current')
      }
      if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today') || props.selectionMode === 'week')) {
        classes.push('in-range')
        if (cell.start) {
          classes.push('start-date')
        }
        if (cell.end) {
          classes.push('end-date')
        }
      }
      if (cell.disabled) {
        classes.push('disabled')
      }
      if (cell.selected) {
        classes.push('selected')
      }
      if (cell.customClass) {
        classes.push(cell.customClass)
      }
      return classes.join(' ')
    }
    const getDateOfCell = (row, column) => {
      const offsetFromStart = row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - offsetDay.value
      return startDate.value.add(offsetFromStart, 'day')
    }
    const handleMouseMove = event => {
      if (!props.rangeState.selecting) { return }
      let target = event.target
      if (target.tagName === 'SPAN') {
        target = target.parentNode.parentNode
      }
      if (target.tagName === 'DIV') {
        target = target.parentNode
      }
      if (target.tagName !== 'TD') { return }
      const row = target.parentNode.rowIndex - 1
      const column = target.cellIndex
      if (rows.value[row][column].disabled) { return }
      if (row !== lastRow.value || column !== lastColumn.value) {
        lastRow.value = row
        lastColumn.value = column
        ctx.emit('changerange', {
          selecting: true,
          endDate: getDateOfCell(row, column)
        })
      }
    }
    const handleClick = event => {
      let target = event.target
      if (target.tagName === 'SPAN') {
        target = target.parentNode.parentNode
      }
      if (target.tagName === 'DIV') {
        target = target.parentNode
      }
      if (target.tagName !== 'TD') { return }
      const row = target.parentNode.rowIndex - 1
      const column = target.cellIndex
      const cell = rows.value[row][column]
      if (cell.disabled || cell.type === 'week') { return }
      const newDate = getDateOfCell(row, column)
      if (props.selectionMode === 'range') {
        if (!props.rangeState.selecting) {
          ctx.emit('pick', { minDate: newDate, maxDate: null })
          ctx.emit('select', true)
        } else {
          if (newDate >= props.minDate) {
            ctx.emit('pick', { minDate: props.minDate, maxDate: newDate })
          } else {
            ctx.emit('pick', { minDate: newDate, maxDate: props.minDate })
          }
          ctx.emit('select', false)
        }
      } else if (props.selectionMode === 'day') {
        ctx.emit('pick', newDate)
      } else if (props.selectionMode === 'week') {
        const weekNumber = newDate.week()
        const value = newDate.year() + 'w' + weekNumber
        ctx.emit('pick', {
          year: newDate.year(),
          week: weekNumber,
          value: value,
          date: newDate.startOf('week')
        })
      } else if (props.selectionMode === 'dates') {
        const newValue = cell.selected
          ? util.coerceTruthyValueToArray(props.parsedValue).filter(_ => _.valueOf() !== newDate.valueOf())
          : util.coerceTruthyValueToArray(props.parsedValue).concat([newDate])
        ctx.emit('pick', newValue)
      }
    }
    const isWeekActive = cell => {
      if (props.selectionMode !== 'week') { return false }
      let newDate = props.date.startOf('day')
      if (cell.type === 'prev-month') {
        newDate = newDate.subtract(1, 'month')
      }
      if (cell.type === 'next-month') {
        newDate = newDate.add(1, 'month')
      }
      newDate = newDate.date(parseInt(cell.text, 10))
      if (props.parsedValue && !Array.isArray(props.parsedValue)) {
        const dayOffset = (props.parsedValue.day() - firstDayOfWeek + 7) % 7 - 1
        const weekDate = props.parsedValue.subtract(dayOffset, 'day')
        return weekDate.isSame(newDate, 'day')
      }
      return false
    }
    return {
      handleMouseMove,
      t: locale.t,
      rows,
      isWeekActive,
      getCellClasses,
      WEEKS,
      handleClick
    }
  }
})

const _hoisted_1 = { key: 0 }

function render (_ctx, _cache, $props, $setup, $data, $options) {
  return (vue.openBlock(), vue.createBlock('table', {
    cellspacing: '0',
    cellpadding: '0',
    class: ['el-date-table', { 'is-week-mode': _ctx.selectionMode === 'week' }],
    onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args))),
    onMousemove: _cache[2] || (_cache[2] = (...args) => (_ctx.handleMouseMove && _ctx.handleMouseMove(...args)))
  }, [
    vue.createVNode('tbody', null, [
      vue.createVNode('tr', null, [
        (_ctx.showWeekNumber)
          ? (vue.openBlock(), vue.createBlock('th', _hoisted_1, vue.toDisplayString(_ctx.t('el.datepicker.week')), 1 /* TEXT */))
          : vue.createCommentVNode('v-if', true),
        (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.WEEKS, (week, key) => {
          return (vue.openBlock(), vue.createBlock('th', { key: key }, vue.toDisplayString(_ctx.t('el.datepicker.weeks.' + week)), 1 /* TEXT */))
        }), 128 /* KEYED_FRAGMENT */))
      ]),
      (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row, key) => {
        return (vue.openBlock(), vue.createBlock('tr', {
          key: key,
          class: ['el-date-table__row', { current: _ctx.isWeekActive(row[1]) }]
        }, [
          (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(row, (cell, key_) => {
            return (vue.openBlock(), vue.createBlock('td', {
              key: key_,
              class: _ctx.getCellClasses(cell)
            }, [
              vue.createVNode('div', null, [
                vue.createVNode('span', null, vue.toDisplayString(cell.text), 1 /* TEXT */)
              ])
            ], 2 /* CLASS */))
          }), 128 /* KEYED_FRAGMENT */))
        ], 2 /* CLASS */))
      }), 128 /* KEYED_FRAGMENT */))
    ])
  ], 34 /* CLASS, HYDRATE_EVENTS */))
}

script.render = render
script.__file = 'packages/date-picker/src/date-picker-com/basic-date-table.vue'

const datesInMonth = (year, month) => {
  const firstDay = dayjs__default.default.tz().startOf('month').month(month).year(year)
  const numOfDays = firstDay.daysInMonth()
  return timePicker.rangeArr(numOfDays).map(n => firstDay.add(n, 'day').toDate())
}
const script$1 = vue.defineComponent({
  props: {
    disabledDate: {
      type: Function
    },
    selectionMode: {
      type: String,
      default: 'month'
    },
    minDate: {
      type: Object
    },
    maxDate: {
      type: Object
    },
    date: {
      type: Object
    },
    parsedValue: {
      type: Object
    },
    rangeState: {
      type: Object,
      default: () => ({
        endDate: null,
        selecting: false
      })
    }
  },
  emits: ['changerange', 'pick', 'select'],
  setup (props, ctx) {
    const months = vue.ref(props.date.locale('en').localeData().monthsShort().map(_ => _.toLowerCase()))
    const tableRows = vue.ref([[], [], []])
    const lastRow = vue.ref(null)
    const lastColumn = vue.ref(null)
    const rows = vue.computed(() => {
      let _a
      const rows = tableRows.value
      const now = dayjs__default.default.tz().startOf('month')
      for (let i = 0; i < 3; i++) {
        const row = rows[i]
        for (let j = 0; j < 4; j++) {
          let cell = row[j]
          if (!cell) {
            cell = {
              row: i,
              column: j,
              type: 'normal',
              inRange: false,
              start: false,
              end: false
            }
          }
          cell.type = 'normal'
          const index = i * 4 + j
          const calTime = props.date.startOf('year').month(index)
          const calEndDate = props.rangeState.endDate || props.maxDate ||
                        props.rangeState.selecting && props.minDate
          cell.inRange = (props.minDate &&
                        calTime.isSameOrAfter(props.minDate, 'month') &&
                        (calEndDate &&
                            calTime.isSameOrBefore(calEndDate, 'month'))) || (props.minDate &&
                        calTime.isSameOrBefore(props.minDate, 'month') &&
                        (calEndDate &&
                            calTime.isSameOrAfter(calEndDate, 'month')))
          if ((_a = props.minDate) === null || _a === void 0 ? void 0 : _a.isSameOrAfter(calEndDate)) {
            cell.start = calEndDate && calTime.isSame(calEndDate, 'month')
            cell.end = props.minDate && calTime.isSame(props.minDate, 'month')
          } else {
            cell.start = props.minDate && calTime.isSame(props.minDate, 'month')
            cell.end = calEndDate && calTime.isSame(calEndDate, 'month')
          }
          const isToday = now.isSame(calTime)
          if (isToday) {
            cell.type = 'today'
          }
          cell.text = index
          const cellDate = calTime.toDate()
          cell.disabled = props.disabledDate && props.disabledDate(cellDate)
          row[j] = cell
        }
      }
      return rows
    })
    const getCellStyle = cell => {
      const style = {}
      const year = props.date.year()
      const today = new Date()
      const month = cell.text
      style.disabled = props.disabledDate
        ? datesInMonth(year, month).every(props.disabledDate)
        : false
      style.current = util.coerceTruthyValueToArray(props.parsedValue).findIndex(date => date.year() === year && date.month() === month) >= 0
      style.today = today.getFullYear() === year && today.getMonth() === month
      if (cell.inRange) {
        style['in-range'] = true
        if (cell.start) {
          style['start-date'] = true
        }
        if (cell.end) {
          style['end-date'] = true
        }
      }
      return style
    }
    const handleMouseMove = event => {
      if (!props.rangeState.selecting) { return }
      let target = event.target
      if (target.tagName === 'A') {
        target = target.parentNode.parentNode
      }
      if (target.tagName === 'DIV') {
        target = target.parentNode
      }
      if (target.tagName !== 'TD') { return }
      const row = target.parentNode.rowIndex
      const column = target.cellIndex
      if (rows.value[row][column].disabled) { return }
      if (row !== lastRow.value || column !== lastColumn.value) {
        lastRow.value = row
        lastColumn.value = column
        ctx.emit('changerange', {
          selecting: true,
          endDate: props.date.startOf('year').month(row * 4 + column)
        })
      }
    }
    const handleMonthTableClick = event => {
      let target = event.target
      if (target.tagName === 'A') {
        target = target.parentNode.parentNode
      }
      if (target.tagName === 'DIV') {
        target = target.parentNode
      }
      if (target.tagName !== 'TD') { return }
      if (dom.hasClass(target, 'disabled')) { return }
      const column = target.cellIndex
      const row = target.parentNode.rowIndex
      const month = row * 4 + column
      const newDate = props.date.startOf('year').month(month)
      if (props.selectionMode === 'range') {
        if (!props.rangeState.selecting) {
          ctx.emit('pick', { minDate: newDate, maxDate: null })
          ctx.emit('select', true)
        } else {
          if (newDate >= props.minDate) {
            ctx.emit('pick', { minDate: props.minDate, maxDate: newDate })
          } else {
            ctx.emit('pick', { minDate: newDate, maxDate: props.minDate })
          }
          ctx.emit('select', false)
        }
      } else {
        ctx.emit('pick', month)
      }
    }
    return {
      handleMouseMove,
      handleMonthTableClick,
      rows,
      getCellStyle,
      t: locale.t,
      months
    }
  }
})

const _hoisted_1$1 = { class: 'cell' }

function render$1 (_ctx, _cache, $props, $setup, $data, $options) {
  return (vue.openBlock(), vue.createBlock('table', {
    class: 'el-month-table',
    onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleMonthTableClick && _ctx.handleMonthTableClick(...args))),
    onMousemove: _cache[2] || (_cache[2] = (...args) => (_ctx.handleMouseMove && _ctx.handleMouseMove(...args)))
  }, [
    vue.createVNode('tbody', null, [
      (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row, key) => {
        return (vue.openBlock(), vue.createBlock('tr', { key: key }, [
          (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(row, (cell, key_) => {
            return (vue.openBlock(), vue.createBlock('td', {
              key: key_,
              class: _ctx.getCellStyle(cell)
            }, [
              vue.createVNode('div', null, [
                vue.createVNode('a', _hoisted_1$1, vue.toDisplayString(_ctx.t('el.datepicker.months.' + _ctx.months[cell.text])), 1 /* TEXT */)
              ])
            ], 2 /* CLASS */))
          }), 128 /* KEYED_FRAGMENT */))
        ]))
      }), 128 /* KEYED_FRAGMENT */))
    ])
  ], 32 /* HYDRATE_EVENTS */))
}

script$1.render = render$1
script$1.__file = 'packages/date-picker/src/date-picker-com/basic-month-table.vue'

const datesInYear = year => {
  const firstDay = dayjs__default.default.tz(String(year)).startOf('year')
  const lastDay = firstDay.endOf('year')
  const numOfDays = lastDay.dayOfYear()
  return timePicker.rangeArr(numOfDays).map(n => firstDay.add(n, 'day').toDate())
}
const script$2 = vue.defineComponent({
  props: {
    disabledDate: {
      type: Function
    },
    parsedValue: {
      type: Object
    },
    date: {
      type: Object
    }
  },
  emits: ['pick'],
  setup (props, ctx) {
    const startYear = vue.computed(() => {
      return Math.floor(props.date.year() / 10) * 10
    })
    const getCellStyle = year => {
      const style = {}
      const today = dayjs__default.default.tz()
      style.disabled = props.disabledDate
        ? datesInYear(year).every(props.disabledDate)
        : false
      style.current = util.coerceTruthyValueToArray(props.parsedValue).findIndex(_ => _.year() === year) >= 0
      style.today = today.year() === year
      return style
    }
    const handleYearTableClick = event => {
      const target = event.target
      if (target.tagName === 'A') {
        if (dom.hasClass(target.parentNode, 'disabled')) { return }
        const year = target.textContent || target.innerText
        ctx.emit('pick', Number(year))
      }
    }
    return {
      startYear,
      getCellStyle,
      handleYearTableClick
    }
  }
})

const _hoisted_1$2 = { class: 'cell' }
const _hoisted_2 = { class: 'cell' }
const _hoisted_3 = { class: 'cell' }
const _hoisted_4 = { class: 'cell' }
const _hoisted_5 = { class: 'cell' }
const _hoisted_6 = { class: 'cell' }
const _hoisted_7 = { class: 'cell' }
const _hoisted_8 = { class: 'cell' }
const _hoisted_9 = { class: 'cell' }
const _hoisted_10 = { class: 'cell' }
const _hoisted_11 = /* #__PURE__ */vue.createVNode('td', null, null, -1 /* HOISTED */)
const _hoisted_12 = /* #__PURE__ */vue.createVNode('td', null, null, -1 /* HOISTED */)

function render$2 (_ctx, _cache, $props, $setup, $data, $options) {
  return (vue.openBlock(), vue.createBlock('table', {
    class: 'el-year-table',
    onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleYearTableClick && _ctx.handleYearTableClick(...args)))
  }, [
    vue.createVNode('tbody', null, [
      vue.createVNode('tr', null, [
        vue.createVNode('td', {
          class: ['available', _ctx.getCellStyle(_ctx.startYear + 0)]
        }, [
          vue.createVNode('a', _hoisted_1$2, vue.toDisplayString(_ctx.startYear), 1 /* TEXT */)
        ], 2 /* CLASS */),
        vue.createVNode('td', {
          class: ['available', _ctx.getCellStyle(_ctx.startYear + 1)]
        }, [
          vue.createVNode('a', _hoisted_2, vue.toDisplayString(_ctx.startYear + 1), 1 /* TEXT */)
        ], 2 /* CLASS */),
        vue.createVNode('td', {
          class: ['available', _ctx.getCellStyle(_ctx.startYear + 2)]
        }, [
          vue.createVNode('a', _hoisted_3, vue.toDisplayString(_ctx.startYear + 2), 1 /* TEXT */)
        ], 2 /* CLASS */),
        vue.createVNode('td', {
          class: ['available', _ctx.getCellStyle(_ctx.startYear + 3)]
        }, [
          vue.createVNode('a', _hoisted_4, vue.toDisplayString(_ctx.startYear + 3), 1 /* TEXT */)
        ], 2 /* CLASS */)
      ]),
      vue.createVNode('tr', null, [
        vue.createVNode('td', {
          class: ['available', _ctx.getCellStyle(_ctx.startYear + 4)]
        }, [
          vue.createVNode('a', _hoisted_5, vue.toDisplayString(_ctx.startYear + 4), 1 /* TEXT */)
        ], 2 /* CLASS */),
        vue.createVNode('td', {
          class: ['available', _ctx.getCellStyle(_ctx.startYear + 5)]
        }, [
          vue.createVNode('a', _hoisted_6, vue.toDisplayString(_ctx.startYear + 5), 1 /* TEXT */)
        ], 2 /* CLASS */),
        vue.createVNode('td', {
          class: ['available', _ctx.getCellStyle(_ctx.startYear + 6)]
        }, [
          vue.createVNode('a', _hoisted_7, vue.toDisplayString(_ctx.startYear + 6), 1 /* TEXT */)
        ], 2 /* CLASS */),
        vue.createVNode('td', {
          class: ['available', _ctx.getCellStyle(_ctx.startYear + 7)]
        }, [
          vue.createVNode('a', _hoisted_8, vue.toDisplayString(_ctx.startYear + 7), 1 /* TEXT */)
        ], 2 /* CLASS */)
      ]),
      vue.createVNode('tr', null, [
        vue.createVNode('td', {
          class: ['available', _ctx.getCellStyle(_ctx.startYear + 8)]
        }, [
          vue.createVNode('a', _hoisted_9, vue.toDisplayString(_ctx.startYear + 8), 1 /* TEXT */)
        ], 2 /* CLASS */),
        vue.createVNode('td', {
          class: ['available', _ctx.getCellStyle(_ctx.startYear + 9)]
        }, [
          vue.createVNode('a', _hoisted_10, vue.toDisplayString(_ctx.startYear + 9), 1 /* TEXT */)
        ], 2 /* CLASS */),
        _hoisted_11,
        _hoisted_12
      ])
    ])
  ]))
}

script$2.render = render$2
script$2.__file = 'packages/date-picker/src/date-picker-com/basic-year-table.vue'

const timeWithinRange = () => true
const script$3 = vue.defineComponent({
  components: {
    DateTable: script, ElInput: ElInput__default.default, ElButton: ElButton__default.default, TimePickPanel: timePicker.TimePickPanel, MonthTable: script$1, YearTable: script$2
  },
  directives: { clickoutside: directives.ClickOutside },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    parsedValue: {
      type: [Object, Array]
    },
    format: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      required: true
    }
  },
  emits: ['pick', 'set-picker-option'],
  setup (props, ctx) {
    const innerDate = vue.ref(dayjs__default.default.tz())
    const month = vue.computed(() => {
      return innerDate.value.month()
    })
    const year = vue.computed(() => {
      return innerDate.value.year()
    })
    const selectableRange = vue.ref([])
    const userInputDate = vue.ref(null)
    const userInputTime = vue.ref(null)
    const checkDateWithinRange = date => {
      return selectableRange.value.length > 0
        ? timeWithinRange(date, selectableRange.value, props.format || 'HH:mm:ss')
        : true
    }
    const formatEmit = (emitDayjs) => {
      if (showTime.value) { return emitDayjs.millisecond(0) }
      if (defaultTime) {
        const defaultTimeD = dayjs__default.default.tz(defaultTime)
        return defaultTimeD.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date())
      }
      return emitDayjs.startOf('day')
    }
    const emit = (value, ...args) => {
      if (!value) {
        ctx.emit('pick', value, ...args)
      } else if (Array.isArray(value)) {
        const dates = value.map(formatEmit)
        ctx.emit('pick', dates, ...args)
      } else {
        ctx.emit('pick', formatEmit(value), ...args)
      }
      userInputDate.value = null
      userInputTime.value = null
    }
    const handleDatePick = (value) => {
      if (selectionMode.value === 'day') {
        let newDate = props.parsedValue ? props.parsedValue.year(value.year()).month(value.month()).date(value.date()) : value
        if (!checkDateWithinRange(newDate)) {
          newDate = selectableRange.value[0][0].year(value.year()).month(value.month()).date(value.date())
        }
        innerDate.value = newDate
        emit(newDate, showTime.value)
      } else if (selectionMode.value === 'week') {
        emit(value.date)
      } else if (selectionMode.value === 'dates') {
        emit(value, true)
      }
    }
    const prevMonth_ = () => {
      innerDate.value = innerDate.value.subtract(1, 'month')
    }
    const nextMonth_ = () => {
      innerDate.value = innerDate.value.add(1, 'month')
    }
    const prevYear_ = () => {
      if (currentView.value === 'year') {
        innerDate.value = innerDate.value.subtract(10, 'year')
      } else {
        innerDate.value = innerDate.value.subtract(1, 'year')
      }
    }
    const nextYear_ = () => {
      if (currentView.value === 'year') {
        innerDate.value = innerDate.value.add(10, 'year')
      } else {
        innerDate.value = innerDate.value.add(1, 'year')
      }
    }
    const currentView = vue.ref('date')
    const yearLabel = vue.computed(() => {
      const yearTranslation = locale.t('el.datepicker.year')
      if (currentView.value === 'year') {
        const startYear = Math.floor(year.value / 10) * 10
        if (yearTranslation) {
          return startYear + ' ' + yearTranslation + ' - ' + (startYear + 9) + ' ' + yearTranslation
        }
        return startYear + ' - ' + (startYear + 9)
      }
      return year.value + ' ' + yearTranslation
    })
    const handleShortcutClick = shortcut => {
      if (shortcut.value) {
        emit(dayjs__default.default.tz(shortcut.value))
        return
      }
      if (shortcut.onClick) {
        shortcut.onClick(ctx)
      }
    }
    const selectionMode = vue.computed(() => {
      if (['week', 'month', 'year', 'dates'].includes(props.type)) {
        return props.type
      }
      return 'day'
    })
    vue.watch(() => selectionMode.value, val => {
      if (['month', 'year'].includes(val)) {
        currentView.value = val
        return
      }
      currentView.value = 'date'
    }, { immediate: true })
    const hasShortcuts = vue.computed(() => !!shortcuts.length)
    const handleMonthPick = month => {
      innerDate.value = innerDate.value.startOf('month').month(month)
      if (selectionMode.value === 'month') {
        emit(innerDate.value)
      } else {
        currentView.value = 'date'
      }
    }
    const handleYearPick = year => {
      if (selectionMode.value === 'year') {
        innerDate.value = innerDate.value.startOf('year').year(year)
        emit(innerDate.value)
      } else {
        innerDate.value = innerDate.value.year(year)
        currentView.value = 'month'
      }
    }
    const showMonthPicker = () => {
      currentView.value = 'month'
    }
    const showYearPicker = () => {
      currentView.value = 'year'
    }
    const showTime = vue.computed(() => props.type === 'datetime' || props.type === 'datetimerange')
    const footerVisible = vue.computed(() => {
      return showTime.value || selectionMode.value === 'dates'
    })
    const onConfirm = () => {
      if (selectionMode.value === 'dates') {
        emit(props.parsedValue)
      } else {
        let result = props.parsedValue
        if (!result) {
          const defaultTimeD = dayjs__default.default.tz(defaultTime)
          const defaultValueD = getDefaultValue()
          result = defaultTimeD.year(defaultValueD.year()).month(defaultValueD.month()).date(defaultValueD.date())
        }
        innerDate.value = result
        emit(result)
      }
    }
    const changeToNow = () => {
      const now = dayjs__default.default.tz()
      const nowDate = now.toDate()
      if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) {
        innerDate.value = dayjs__default.default.tz()
        emit(innerDate.value)
      }
    }
    const timeFormat = vue.computed(() => {
      return timePicker.extractTimeFormat(props.format)
    })
    const dateFormat = vue.computed(() => {
      return timePicker.extractDateFormat(props.format)
    })
    const visibleTime = vue.computed(() => {
      if (userInputTime.value) { return userInputTime.value }
      if (!props.parsedValue && !defaultValue) { return }
      return (props.parsedValue || innerDate.value).format(timeFormat.value)
    })
    const visibleDate = vue.computed(() => {
      if (userInputDate.value) { return userInputDate.value }
      if (!props.parsedValue && !defaultValue) { return }
      return (props.parsedValue || innerDate.value).format(dateFormat.value)
    })
    const timePickerVisible = vue.ref(false)
    const onTimePickerInputFocus = () => {
      timePickerVisible.value = true
    }
    const handleTimePickClose = () => {
      timePickerVisible.value = false
    }
    const handleTimePick = (value, visible, first) => {
      const newDate = props.parsedValue ? props.parsedValue.hour(value.hour()).minute(value.minute()).second(value.second()) : value
      innerDate.value = newDate
      emit(innerDate.value, true)
      if (!first) {
        timePickerVisible.value = visible
      }
    }
    const handleVisibleTimeChange = value => {
      const newDate = dayjs__default.default.tz(value, timeFormat.value)
      if (newDate.isValid() && checkDateWithinRange(newDate)) {
        innerDate.value = newDate.year(innerDate.value.year()).month(innerDate.value.month()).date(innerDate.value.date())
        userInputTime.value = null
        timePickerVisible.value = false
        emit(innerDate.value, true)
      }
    }
    const handleVisibleDateChange = value => {
      const newDate = dayjs__default.default.tz(value, dateFormat.value)
      if (newDate.isValid()) {
        if (disabledDate && disabledDate(newDate.toDate())) {
          return
        }
        innerDate.value = newDate.hour(innerDate.value.hour()).minute(innerDate.value.minute()).second(innerDate.value.second())
        userInputDate.value = null
        emit(innerDate.value, true)
      }
    }
    const isValidValue = date_ => {
      return date_.isValid() && (disabledDate
        ? !disabledDate(date_.toDate())
        : true)
    }
    const formatToString = value => {
      if (selectionMode.value === 'dates') {
        return value.map(_ => _.format(props.format))
      }
      return value.format(props.format)
    }
    const parseUserInput = value => {
      return dayjs__default.default.tz(value, props.format)
    }
    const getDefaultValue = () => {
      return dayjs__default.default.tz(defaultValue)
    }
    const handleKeydown = event => {
      const { code, keyCode } = event
      const list = [aria.EVENT_CODE.up, aria.EVENT_CODE.down, aria.EVENT_CODE.left, aria.EVENT_CODE.right]
      if (props.visible && !timePickerVisible.value) {
        if (list.includes(code)) {
          handleKeyControl(keyCode)
          event.stopPropagation()
          event.preventDefault()
        }
        if (code === aria.EVENT_CODE.enter &&
                    userInputDate.value === null &&
                    userInputTime.value === null) {
          emit(innerDate, false)
        }
      }
    }
    const handleKeyControl = keyCode => {
      const mapping = {
        year: {
          38: -4, 40: 4, 37: -1, 39: 1, offset: (date, step) => date.setFullYear(date.getFullYear() + step)
        },
        month: {
          38: -4, 40: 4, 37: -1, 39: 1, offset: (date, step) => date.setMonth(date.getMonth() + step)
        },
        week: {
          38: -1, 40: 1, 37: -1, 39: 1, offset: (date, step) => date.setDate(date.getDate() + step * 7)
        },
        day: {
          38: -7, 40: 7, 37: -1, 39: 1, offset: (date, step) => date.setDate(date.getDate() + step)
        }
      }
      const newDate = innerDate.value.toDate()
      while (Math.abs(innerDate.value.diff(newDate, 'year', true)) < 1) {
        const map = mapping[selectionMode.value]
        map.offset(newDate, map[keyCode])
        if (disabledDate && disabledDate(newDate)) {
          continue
        }
        const result = dayjs__default.default.tz(newDate)
        innerDate.value = result
        ctx.emit('pick', result, true)
        break
      }
    }
    ctx.emit('set-picker-option', ['isValidValue', isValidValue])
    ctx.emit('set-picker-option', ['formatToString', formatToString])
    ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])
    ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])
    const pickerBase = vue.inject('EP_PICKER_BASE')
    const { shortcuts, disabledDate, cellClassName, defaultTime, defaultValue, arrowControl } = pickerBase.props
    vue.watch(() => props.parsedValue, val => {
      if (val) {
        if (selectionMode.value === 'dates') { return }
        if (Array.isArray(val)) { return }
        innerDate.value = val
      } else {
        innerDate.value = getDefaultValue()
      }
    }, { immediate: true })
    return {
      handleTimePick,
      handleTimePickClose,
      onTimePickerInputFocus,
      timePickerVisible,
      visibleTime,
      visibleDate,
      showTime,
      changeToNow,
      onConfirm,
      footerVisible,
      handleYearPick,
      showMonthPicker,
      showYearPicker,
      handleMonthPick,
      hasShortcuts,
      shortcuts,
      arrowControl,
      disabledDate,
      cellClassName,
      selectionMode,
      handleShortcutClick,
      prevYear_,
      nextYear_,
      prevMonth_,
      nextMonth_,
      innerDate,
      t: locale.t,
      yearLabel,
      currentView,
      month,
      handleDatePick,
      handleVisibleTimeChange,
      handleVisibleDateChange,
      timeFormat,
      userInputTime,
      userInputDate
    }
  }
})

const _hoisted_1$3 = { class: 'el-picker-panel__body-wrapper' }
const _hoisted_2$1 = {
  key: 0,
  class: 'el-picker-panel__sidebar'
}
const _hoisted_3$1 = { class: 'el-picker-panel__body' }
const _hoisted_4$1 = {
  key: 0,
  class: 'el-date-picker__time-header'
}
const _hoisted_5$1 = { class: 'el-date-picker__editor-wrap' }
const _hoisted_6$1 = { class: 'el-date-picker__editor-wrap' }
const _hoisted_7$1 = { class: 'el-picker-panel__content' }
const _hoisted_8$1 = { class: 'el-picker-panel__footer' }

function render$3 (_ctx, _cache, $props, $setup, $data, $options) {
  const _component_el_input = vue.resolveComponent('el-input')
  const _component_time_pick_panel = vue.resolveComponent('time-pick-panel')
  const _component_date_table = vue.resolveComponent('date-table')
  const _component_year_table = vue.resolveComponent('year-table')
  const _component_month_table = vue.resolveComponent('month-table')
  const _component_el_button = vue.resolveComponent('el-button')
  const _directive_clickoutside = vue.resolveDirective('clickoutside')

  return (vue.openBlock(), vue.createBlock('div', {
    class: ['el-picker-panel el-date-picker', [{
      'has-sidebar': _ctx.$slots.sidebar || _ctx.hasShortcuts,
      'has-time': _ctx.showTime
    }]]
  }, [
    vue.createVNode('div', _hoisted_1$3, [
      vue.renderSlot(_ctx.$slots, 'sidebar', { class: 'el-picker-panel__sidebar' }),
      (_ctx.hasShortcuts)
        ? (vue.openBlock(), vue.createBlock('div', _hoisted_2$1, [
            (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.shortcuts, (shortcut, key) => {
              return (vue.openBlock(), vue.createBlock('button', {
                key: key,
                type: 'button',
                class: 'el-picker-panel__shortcut',
                onClick: $event => (_ctx.handleShortcutClick(shortcut))
              }, vue.toDisplayString(shortcut.text), 9 /* TEXT, PROPS */, ['onClick']))
            }), 128 /* KEYED_FRAGMENT */))
          ]))
        : vue.createCommentVNode('v-if', true),
      vue.createVNode('div', _hoisted_3$1, [
        (_ctx.showTime)
          ? (vue.openBlock(), vue.createBlock('div', _hoisted_4$1, [
              vue.createVNode('span', _hoisted_5$1, [
                vue.createVNode(_component_el_input, {
                  placeholder: _ctx.t('el.datepicker.selectDate'),
                  'model-value': _ctx.visibleDate,
                  size: 'small',
                  onInput: _cache[1] || (_cache[1] = val => _ctx.userInputDate = val),
                  onChange: _ctx.handleVisibleDateChange
                }, null, 8 /* PROPS */, ['placeholder', 'model-value', 'onChange'])
              ]),
              vue.withDirectives(vue.createVNode('span', _hoisted_6$1, [
                vue.createVNode(_component_el_input, {
                  placeholder: _ctx.t('el.datepicker.selectTime'),
                  'model-value': _ctx.visibleTime,
                  size: 'small',
                  onFocus: _ctx.onTimePickerInputFocus,
                  onInput: _cache[2] || (_cache[2] = val => _ctx.userInputTime = val),
                  onChange: _ctx.handleVisibleTimeChange
                }, null, 8 /* PROPS */, ['placeholder', 'model-value', 'onFocus', 'onChange']),
                vue.createVNode(_component_time_pick_panel, {
                  visible: _ctx.timePickerVisible,
                  format: _ctx.timeFormat,
                  'time-arrow-control': _ctx.arrowControl,
                  'parsed-value': _ctx.innerDate,
                  onPick: _ctx.handleTimePick
                }, null, 8 /* PROPS */, ['visible', 'format', 'time-arrow-control', 'parsed-value', 'onPick'])
              ], 512 /* NEED_PATCH */), [
                [_directive_clickoutside, _ctx.handleTimePickClose]
              ])
            ]))
          : vue.createCommentVNode('v-if', true),
        vue.withDirectives(vue.createVNode('div', {
          class: ['el-date-picker__header', { 'el-date-picker__header--bordered': _ctx.currentView === 'year' || _ctx.currentView === 'month' }]
        }, [
          vue.createVNode('button', {
            type: 'button',
            'aria-label': _ctx.t('el.datepicker.prevYear'),
            class: 'el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left',
            onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.prevYear_ && _ctx.prevYear_(...args)))
          }, null, 8 /* PROPS */, ['aria-label']),
          vue.withDirectives(vue.createVNode('button', {
            type: 'button',
            'aria-label': _ctx.t('el.datepicker.prevMonth'),
            class: 'el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left',
            onClick: _cache[4] || (_cache[4] = (...args) => (_ctx.prevMonth_ && _ctx.prevMonth_(...args)))
          }, null, 8 /* PROPS */, ['aria-label']), [
            [vue.vShow, _ctx.currentView === 'date']
          ]),
          vue.createVNode('span', {
            role: 'button',
            class: 'el-date-picker__header-label',
            onClick: _cache[5] || (_cache[5] = (...args) => (_ctx.showYearPicker && _ctx.showYearPicker(...args)))
          }, vue.toDisplayString(_ctx.yearLabel), 1 /* TEXT */),
          vue.withDirectives(vue.createVNode('span', {
            role: 'button',
            class: ['el-date-picker__header-label', { active: _ctx.currentView === 'month' }],
            onClick: _cache[6] || (_cache[6] = (...args) => (_ctx.showMonthPicker && _ctx.showMonthPicker(...args)))
          }, vue.toDisplayString(_ctx.t(`el.datepicker.month${_ctx.month + 1}`)), 3 /* TEXT, CLASS */), [
            [vue.vShow, _ctx.currentView === 'date']
          ]),
          vue.createVNode('button', {
            type: 'button',
            'aria-label': _ctx.t('el.datepicker.nextYear'),
            class: 'el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right',
            onClick: _cache[7] || (_cache[7] = (...args) => (_ctx.nextYear_ && _ctx.nextYear_(...args)))
          }, null, 8 /* PROPS */, ['aria-label']),
          vue.withDirectives(vue.createVNode('button', {
            type: 'button',
            'aria-label': _ctx.t('el.datepicker.nextMonth'),
            class: 'el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right',
            onClick: _cache[8] || (_cache[8] = (...args) => (_ctx.nextMonth_ && _ctx.nextMonth_(...args)))
          }, null, 8 /* PROPS */, ['aria-label']), [
            [vue.vShow, _ctx.currentView === 'date']
          ])
        ], 2 /* CLASS */), [
          [vue.vShow, _ctx.currentView !== 'time']
        ]),
        vue.createVNode('div', _hoisted_7$1, [
          (_ctx.currentView === 'date')
            ? (vue.openBlock(), vue.createBlock(_component_date_table, {
                key: 0,
                'selection-mode': _ctx.selectionMode,
                date: _ctx.innerDate,
                'parsed-value': _ctx.parsedValue,
                'disabled-date': _ctx.disabledDate,
                onPick: _ctx.handleDatePick
              }, null, 8 /* PROPS */, ['selection-mode', 'date', 'parsed-value', 'disabled-date', 'onPick']))
            : vue.createCommentVNode('v-if', true),
          (_ctx.currentView === 'year')
            ? (vue.openBlock(), vue.createBlock(_component_year_table, {
                key: 1,
                date: _ctx.innerDate,
                'disabled-date': _ctx.disabledDate,
                'parsed-value': _ctx.parsedValue,
                onPick: _ctx.handleYearPick
              }, null, 8 /* PROPS */, ['date', 'disabled-date', 'parsed-value', 'onPick']))
            : vue.createCommentVNode('v-if', true),
          (_ctx.currentView === 'month')
            ? (vue.openBlock(), vue.createBlock(_component_month_table, {
                key: 2,
                date: _ctx.innerDate,
                'parsed-value': _ctx.parsedValue,
                'disabled-date': _ctx.disabledDate,
                onPick: _ctx.handleMonthPick
              }, null, 8 /* PROPS */, ['date', 'parsed-value', 'disabled-date', 'onPick']))
            : vue.createCommentVNode('v-if', true)
        ])
      ])
    ]),
    vue.withDirectives(vue.createVNode('div', _hoisted_8$1, [
      vue.withDirectives(vue.createVNode(_component_el_button, {
        size: 'mini',
        type: 'text',
        class: 'el-picker-panel__link-btn',
        onClick: _ctx.changeToNow
      }, {
        default: vue.withCtx(() => [
          vue.createTextVNode(vue.toDisplayString(_ctx.t('el.datepicker.now')), 1 /* TEXT */)
        ]),
        _: 1 /* STABLE */
      }, 8 /* PROPS */, ['onClick']), [
        [vue.vShow, _ctx.selectionMode !== 'dates']
      ]),
      vue.createVNode(_component_el_button, {
        plain: '',
        size: 'mini',
        class: 'el-picker-panel__link-btn',
        onClick: _ctx.onConfirm
      }, {
        default: vue.withCtx(() => [
          vue.createTextVNode(vue.toDisplayString(_ctx.t('el.datepicker.confirm')), 1 /* TEXT */)
        ]),
        _: 1 /* STABLE */
      }, 8 /* PROPS */, ['onClick'])
    ], 512 /* NEED_PATCH */), [
      [vue.vShow, _ctx.footerVisible && _ctx.currentView === 'date']
    ])
  ], 2 /* CLASS */))
}

script$3.render = render$3
script$3.__file = 'packages/date-picker/src/date-picker-com/panel-date-pick.vue'

const script$4 = vue.defineComponent({
  directives: { clickoutside: directives.ClickOutside },
  components: { TimePickPanel: timePicker.TimePickPanel, DateTable: script, ElInput: ElInput__default.default, ElButton: ElButton__default.default },
  props: {
    unlinkPanels: Boolean,
    parsedValue: {
      type: Array
    },
    type: {
      type: String,
      required: true
    }
  },
  emits: ['pick', 'set-picker-option'],
  setup (props, ctx) {
    const leftDate = vue.ref(dayjs__default.default.tz())
    const rightDate = vue.ref(dayjs__default.default.tz().add(1, 'month'))
    const minDate = vue.ref(null)
    const maxDate = vue.ref(null)
    const dateUserInput = vue.ref({
      min: null,
      max: null
    })
    const timeUserInput = vue.ref({
      min: null,
      max: null
    })
    const leftLabel = vue.computed(() => {
      return leftDate.value.year() + ' ' + locale.t('el.datepicker.year') + ' ' + locale.t(`el.datepicker.month${leftDate.value.month() + 1}`)
    })
    const rightLabel = vue.computed(() => {
      return rightDate.value.year() + ' ' + locale.t('el.datepicker.year') + ' ' + locale.t(`el.datepicker.month${rightDate.value.month() + 1}`)
    })
    const leftYear = vue.computed(() => {
      return leftDate.value.year()
    })
    const leftMonth = vue.computed(() => {
      return leftDate.value.month()
    })
    const rightYear = vue.computed(() => {
      return rightDate.value.year()
    })
    const rightMonth = vue.computed(() => {
      return rightDate.value.month()
    })
    const hasShortcuts = vue.computed(() => !!shortcuts.length)
    const minVisibleDate = vue.computed(() => {
      if (dateUserInput.value.min !== null) { return dateUserInput.value.min }
      if (minDate.value) { return minDate.value.format(dateFormat.value) }
      return ''
    })
    const maxVisibleDate = vue.computed(() => {
      if (dateUserInput.value.max !== null) { return dateUserInput.value.max }
      if (maxDate.value || minDate.value) { return ((maxDate.value || minDate.value)).format(dateFormat.value) }
      return ''
    })
    const minVisibleTime = vue.computed(() => {
      if (timeUserInput.value.min !== null) { return timeUserInput.value.min }
      if (minDate.value) { return minDate.value.format(timeFormat.value) }
      return ''
    })
    const maxVisibleTime = vue.computed(() => {
      if (timeUserInput.value.max !== null) { return timeUserInput.value.max }
      if (maxDate.value || minDate.value) { return ((maxDate.value || minDate.value)).format(timeFormat.value) }
      return ''
    })
    const timeFormat = vue.computed(() => {
      return timePicker.extractTimeFormat(format)
    })
    const dateFormat = vue.computed(() => {
      return timePicker.extractDateFormat(format)
    })
    const leftPrevYear = () => {
      leftDate.value = leftDate.value.subtract(1, 'year')
      if (!props.unlinkPanels) {
        rightDate.value = leftDate.value.add(1, 'month')
      }
    }
    const leftPrevMonth = () => {
      leftDate.value = leftDate.value.subtract(1, 'month')
      if (!props.unlinkPanels) {
        rightDate.value = leftDate.value.add(1, 'month')
      }
    }
    const rightNextYear = () => {
      if (!props.unlinkPanels) {
        leftDate.value = leftDate.value.add(1, 'year')
        rightDate.value = leftDate.value.add(1, 'month')
      } else {
        rightDate.value = rightDate.value.add(1, 'year')
      }
    }
    const rightNextMonth = () => {
      if (!props.unlinkPanels) {
        leftDate.value = leftDate.value.add(1, 'month')
        rightDate.value = leftDate.value.add(1, 'month')
      } else {
        rightDate.value = rightDate.value.add(1, 'month')
      }
    }
    const leftNextYear = () => {
      leftDate.value = leftDate.value.add(1, 'year')
    }
    const leftNextMonth = () => {
      leftDate.value = leftDate.value.add(1, 'month')
    }
    const rightPrevYear = () => {
      rightDate.value = rightDate.value.subtract(1, 'year')
    }
    const rightPrevMonth = () => {
      rightDate.value = rightDate.value.subtract(1, 'month')
    }
    const enableMonthArrow = vue.computed(() => {
      const nextMonth = (leftMonth.value + 1) % 12
      const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0
      return props.unlinkPanels && new Date(leftYear.value + yearOffset, nextMonth) < new Date(rightYear.value, rightMonth.value)
    })
    const enableYearArrow = vue.computed(() => {
      return props.unlinkPanels && rightYear.value * 12 + rightMonth.value - (leftYear.value * 12 + leftMonth.value + 1) >= 12
    })
    const isValidValue = value => {
      return Array.isArray(value) &&
                value[0] && value[1] &&
                value[0].valueOf() <= value[1].valueOf()
    }
    const rangeState = vue.ref({
      endDate: null,
      selecting: false
    })
    const btnDisabled = vue.computed(() => {
      return !(minDate.value && maxDate.value && !rangeState.value.selecting && isValidValue([minDate.value, maxDate.value]))
    })
    const handleChangeRange = val => {
      rangeState.value = val
    }
    const onSelect = selecting => {
      rangeState.value.selecting = selecting
      if (!selecting) {
        rangeState.value.endDate = null
      }
    }
    const showTime = vue.computed(() => props.type === 'datetime' || props.type === 'datetimerange')
    const handleConfirm = (visible = false) => {
      if (isValidValue([minDate.value, maxDate.value])) {
        ctx.emit('pick', [minDate.value, maxDate.value], visible)
      }
    }
    const formatEmit = (emitDayjs, index) => {
      if (!emitDayjs) { return }
      if (defaultTime) {
        const defaultTimeD = dayjs__default.default.tz(defaultTime[index] || defaultTime)
        return defaultTimeD.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date())
      }
      return emitDayjs
    }
    const handleRangePick = (val, close = true) => {
      const minDate_ = formatEmit(val.minDate, 0)
      const maxDate_ = formatEmit(val.maxDate, 1)
      if (maxDate.value === maxDate_ && minDate.value === minDate_) {
        return
      }
      maxDate.value = maxDate_
      minDate.value = minDate_
      if (!close || showTime.value) { return }
      handleConfirm()
    }
    const handleShortcutClick = shortcut => {
      if (shortcut.value) {
        ctx.emit('pick', [dayjs__default.default.tz(shortcut.value[0]), dayjs__default.default.tz(shortcut.value[1])])
        return
      }
      if (shortcut.onClick) {
        shortcut.onClick(ctx)
      }
    }
    const minTimePickerVisible = vue.ref(false)
    const maxTimePickerVisible = vue.ref(false)
    const handleMinTimeClose = () => {
      minTimePickerVisible.value = false
    }
    const handleMaxTimeClose = () => {
      maxTimePickerVisible.value = false
    }
    const handleDateInput = (value, type) => {
      dateUserInput.value[type] = value
      const parsedValueD = dayjs__default.default.tz(value, dateFormat.value)
      if (parsedValueD.isValid()) {
        if (disabledDate &&
                    disabledDate(parsedValueD.toDate())) {
          return
        }
        if (type === 'min') {
          leftDate.value = parsedValueD
          minDate.value = (minDate.value || leftDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date())
          if (!props.unlinkPanels) {
            rightDate.value = parsedValueD.add(1, 'month')
            maxDate.value = minDate.value.add(1, 'month')
          }
        } else {
          rightDate.value = parsedValueD
          maxDate.value = (maxDate.value || rightDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date())
          if (!props.unlinkPanels) {
            leftDate.value = parsedValueD.subtract(1, 'month')
            minDate.value = maxDate.value.subtract(1, 'month')
          }
        }
      }
    }
    const handleDateChange = (value, type) => {
      dateUserInput.value[type] = null
    }
    const handleTimeInput = (value, type) => {
      timeUserInput.value[type] = value
      const parsedValueD = dayjs__default.default.tz(value, timeFormat.value)
      if (parsedValueD.isValid()) {
        if (type === 'min') {
          minTimePickerVisible.value = true
          minDate.value = (minDate.value || leftDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second())
          if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {
            maxDate.value = minDate.value
          }
        } else {
          maxTimePickerVisible.value = true
          maxDate.value = (maxDate.value || rightDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second())
          rightDate.value = maxDate.value
          if (maxDate.value && maxDate.value.isBefore(minDate.value)) {
            minDate.value = maxDate.value
          }
        }
      }
    }
    const handleTimeChange = (value, type) => {
      timeUserInput.value[type] = null
      if (type === 'min') {
        leftDate.value = minDate.value
        minTimePickerVisible.value = false
      } else {
        rightDate.value = maxDate.value
        maxTimePickerVisible.value = false
      }
    }
    const handleMinTimePick = (value, visible, first) => {
      if (timeUserInput.value.min) { return }
      if (value) {
        leftDate.value = value
        minDate.value = (minDate.value || leftDate.value).hour(value.hour()).minute(value.minute()).second(value.second())
      }
      if (!first) {
        minTimePickerVisible.value = visible
      }
      if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {
        maxDate.value = minDate.value
      }
    }
    const handleMaxTimePick = (value, visible, first) => {
      if (timeUserInput.value.max) { return }
      if (value) {
        rightDate.value = value
        maxDate.value = (maxDate.value || rightDate.value).hour(value.hour()).minute(value.minute()).second(value.second())
      }
      if (!first) {
        maxTimePickerVisible.value = visible
      }
      if (maxDate.value && maxDate.value.isBefore(minDate.value)) {
        minDate.value = maxDate.value
      }
    }
    const handleClear = () => {
      leftDate.value = getDefaultValue()[0]
      rightDate.value = leftDate.value.add(1, 'month')
      ctx.emit('pick', null)
    }
    const formatToString = value => {
      return Array.isArray(value) ? value.map(_ => _.format(format)) : value.format(format)
    }
    const parseUserInput = value => {
      return Array.isArray(value) ? value.map(_ => dayjs__default.default.tz(_, format)) : dayjs__default.default.tz(value, format)
    }
    const getDefaultValue = () => {
      let start
      if (Array.isArray(defaultValue)) {
        const left = dayjs__default.default.tz(defaultValue[0])
        let right = dayjs__default.default.tz(defaultValue[1])
        if (!props.unlinkPanels) {
          right = left.add(1, 'month')
        }
        return [left, right]
      } else if (defaultValue) {
        start = dayjs__default.default.tz(defaultValue)
      } else {
        start = dayjs__default.default.tz()
      }
      return [start, start.add(1, 'month')]
    }
    ctx.emit('set-picker-option', ['isValidValue', isValidValue])
    ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])
    ctx.emit('set-picker-option', ['formatToString', formatToString])
    ctx.emit('set-picker-option', ['handleClear', handleClear])
    const pickerBase = vue.inject('EP_PICKER_BASE')
    const { shortcuts, disabledDate, cellClassName, format, defaultTime, defaultValue, arrowControl } = pickerBase.props
    vue.watch(() => props.parsedValue, newVal => {
      if (newVal && newVal.length === 2) {
        minDate.value = newVal[0]
        maxDate.value = newVal[1]
        leftDate.value = minDate.value
        if (props.unlinkPanels && maxDate.value) {
          const minDateYear = minDate.value.year()
          const minDateMonth = minDate.value.month()
          const maxDateYear = maxDate.value.year()
          const maxDateMonth = maxDate.value.month()
          rightDate.value = minDateYear === maxDateYear && minDateMonth === maxDateMonth
            ? maxDate.value.add(1, 'month')
            : maxDate.value
        } else {
          rightDate.value = leftDate.value.add(1, 'month')
        }
      } else {
        const defaultArr = getDefaultValue()
        minDate.value = null
        maxDate.value = null
        leftDate.value = defaultArr[0]
        rightDate.value = defaultArr[1]
      }
    }, { immediate: true })
    return {
      shortcuts,
      disabledDate,
      cellClassName,
      minTimePickerVisible,
      maxTimePickerVisible,
      handleMinTimeClose,
      handleMaxTimeClose,
      handleShortcutClick,
      rangeState,
      minDate,
      maxDate,
      handleRangePick,
      onSelect,
      handleChangeRange,
      btnDisabled,
      enableYearArrow,
      enableMonthArrow,
      rightPrevMonth,
      rightPrevYear,
      rightNextMonth,
      rightNextYear,
      leftPrevMonth,
      leftPrevYear,
      leftNextMonth,
      leftNextYear,
      hasShortcuts,
      leftLabel,
      rightLabel,
      leftDate,
      rightDate,
      showTime,
      t: locale.t,
      minVisibleDate,
      maxVisibleDate,
      minVisibleTime,
      maxVisibleTime,
      arrowControl,
      handleDateInput,
      handleDateChange,
      handleTimeInput,
      handleTimeChange,
      handleMinTimePick,
      handleMaxTimePick,
      handleClear,
      handleConfirm,
      timeFormat
    }
  }
})

const _hoisted_1$4 = { class: 'el-picker-panel__body-wrapper' }
const _hoisted_2$2 = {
  key: 0,
  class: 'el-picker-panel__sidebar'
}
const _hoisted_3$2 = { class: 'el-picker-panel__body' }
const _hoisted_4$2 = {
  key: 0,
  class: 'el-date-range-picker__time-header'
}
const _hoisted_5$2 = { class: 'el-date-range-picker__editors-wrap' }
const _hoisted_6$2 = { class: 'el-date-range-picker__time-picker-wrap' }
const _hoisted_7$2 = { class: 'el-date-range-picker__time-picker-wrap' }
const _hoisted_8$2 = /* #__PURE__ */vue.createVNode('span', { class: 'el-icon-arrow-right' }, null, -1 /* HOISTED */)
const _hoisted_9$1 = { class: 'el-date-range-picker__editors-wrap is-right' }
const _hoisted_10$1 = { class: 'el-date-range-picker__time-picker-wrap' }
const _hoisted_11$1 = { class: 'el-date-range-picker__time-picker-wrap' }
const _hoisted_12$1 = { class: 'el-picker-panel__content el-date-range-picker__content is-left' }
const _hoisted_13 = { class: 'el-date-range-picker__header' }
const _hoisted_14 = { class: 'el-picker-panel__content el-date-range-picker__content is-right' }
const _hoisted_15 = { class: 'el-date-range-picker__header' }
const _hoisted_16 = {
  key: 0,
  class: 'el-picker-panel__footer'
}

function render$4 (_ctx, _cache, $props, $setup, $data, $options) {
  const _component_el_input = vue.resolveComponent('el-input')
  const _component_time_pick_panel = vue.resolveComponent('time-pick-panel')
  const _component_date_table = vue.resolveComponent('date-table')
  const _component_el_button = vue.resolveComponent('el-button')
  const _directive_clickoutside = vue.resolveDirective('clickoutside')

  return (vue.openBlock(), vue.createBlock('div', {
    class: ['el-picker-panel el-date-range-picker', [{
      'has-sidebar': _ctx.$slots.sidebar || _ctx.hasShortcuts,
      'has-time': _ctx.showTime
    }]]
  }, [
    vue.createVNode('div', _hoisted_1$4, [
      vue.renderSlot(_ctx.$slots, 'sidebar', { class: 'el-picker-panel__sidebar' }),
      (_ctx.hasShortcuts)
        ? (vue.openBlock(), vue.createBlock('div', _hoisted_2$2, [
            (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.shortcuts, (shortcut, key) => {
              return (vue.openBlock(), vue.createBlock('button', {
                key: key,
                type: 'button',
                class: 'el-picker-panel__shortcut',
                onClick: $event => (_ctx.handleShortcutClick(shortcut))
              }, vue.toDisplayString(shortcut.text), 9 /* TEXT, PROPS */, ['onClick']))
            }), 128 /* KEYED_FRAGMENT */))
          ]))
        : vue.createCommentVNode('v-if', true),
      vue.createVNode('div', _hoisted_3$2, [
        (_ctx.showTime)
          ? (vue.openBlock(), vue.createBlock('div', _hoisted_4$2, [
              vue.createVNode('span', _hoisted_5$2, [
                vue.createVNode('span', _hoisted_6$2, [
                  vue.createVNode(_component_el_input, {
                    size: 'small',
                    disabled: _ctx.rangeState.selecting,
                    placeholder: _ctx.t('el.datepicker.startDate'),
                    class: 'el-date-range-picker__editor',
                    'model-value': _ctx.minVisibleDate,
                    onInput: _cache[1] || (_cache[1] = val => _ctx.handleDateInput(val, 'min')),
                    onChange: _cache[2] || (_cache[2] = val => _ctx.handleDateChange(val, 'min'))
                  }, null, 8 /* PROPS */, ['disabled', 'placeholder', 'model-value'])
                ]),
                vue.withDirectives(vue.createVNode('span', _hoisted_7$2, [
                  vue.createVNode(_component_el_input, {
                    size: 'small',
                    class: 'el-date-range-picker__editor',
                    disabled: _ctx.rangeState.selecting,
                    placeholder: _ctx.t('el.datepicker.startTime'),
                    'model-value': _ctx.minVisibleTime,
                    onFocus: _cache[3] || (_cache[3] = $event => (_ctx.minTimePickerVisible = true)),
                    onInput: _cache[4] || (_cache[4] = val => _ctx.handleTimeInput(val, 'min')),
                    onChange: _cache[5] || (_cache[5] = val => _ctx.handleTimeChange(val, 'min'))
                  }, null, 8 /* PROPS */, ['disabled', 'placeholder', 'model-value']),
                  vue.createVNode(_component_time_pick_panel, {
                    visible: _ctx.minTimePickerVisible,
                    format: _ctx.timeFormat,
                    'datetime-role': 'start',
                    'time-arrow-control': _ctx.arrowControl,
                    'parsed-value': _ctx.leftDate,
                    onPick: _ctx.handleMinTimePick
                  }, null, 8 /* PROPS */, ['visible', 'format', 'time-arrow-control', 'parsed-value', 'onPick'])
                ], 512 /* NEED_PATCH */), [
                  [_directive_clickoutside, _ctx.handleMinTimeClose]
                ])
              ]),
              _hoisted_8$2,
              vue.createVNode('span', _hoisted_9$1, [
                vue.createVNode('span', _hoisted_10$1, [
                  vue.createVNode(_component_el_input, {
                    size: 'small',
                    class: 'el-date-range-picker__editor',
                    disabled: _ctx.rangeState.selecting,
                    placeholder: _ctx.t('el.datepicker.endDate'),
                    'model-value': _ctx.maxVisibleDate,
                    readonly: !_ctx.minDate,
                    onInput: _cache[6] || (_cache[6] = val => _ctx.handleDateInput(val, 'max')),
                    onChange: _cache[7] || (_cache[7] = val => _ctx.handleDateChange(val, 'max'))
                  }, null, 8 /* PROPS */, ['disabled', 'placeholder', 'model-value', 'readonly'])
                ]),
                vue.withDirectives(vue.createVNode('span', _hoisted_11$1, [
                  vue.createVNode(_component_el_input, {
                    size: 'small',
                    class: 'el-date-range-picker__editor',
                    disabled: _ctx.rangeState.selecting,
                    placeholder: _ctx.t('el.datepicker.endTime'),
                    'model-value': _ctx.maxVisibleTime,
                    readonly: !_ctx.minDate,
                    onFocus: _cache[8] || (_cache[8] = $event => (_ctx.minDate && (_ctx.maxTimePickerVisible = true))),
                    onInput: _cache[9] || (_cache[9] = val => _ctx.handleTimeInput(val, 'max')),
                    onChange: _cache[10] || (_cache[10] = val => _ctx.handleTimeChange(val, 'max'))
                  }, null, 8 /* PROPS */, ['disabled', 'placeholder', 'model-value', 'readonly']),
                  vue.createVNode(_component_time_pick_panel, {
                    'datetime-role': 'end',
                    visible: _ctx.maxTimePickerVisible,
                    format: _ctx.timeFormat,
                    'time-arrow-control': _ctx.arrowControl,
                    'parsed-value': _ctx.rightDate,
                    onPick: _ctx.handleMaxTimePick
                  }, null, 8 /* PROPS */, ['visible', 'format', 'time-arrow-control', 'parsed-value', 'onPick'])
                ], 512 /* NEED_PATCH */), [
                  [_directive_clickoutside, _ctx.handleMaxTimeClose]
                ])
              ])
            ]))
          : vue.createCommentVNode('v-if', true),
        vue.createVNode('div', _hoisted_12$1, [
          vue.createVNode('div', _hoisted_13, [
            vue.createVNode('button', {
              type: 'button',
              class: 'el-picker-panel__icon-btn el-icon-d-arrow-left',
              onClick: _cache[11] || (_cache[11] = (...args) => (_ctx.leftPrevYear && _ctx.leftPrevYear(...args)))
            }),
            vue.createVNode('button', {
              type: 'button',
              class: 'el-picker-panel__icon-btn el-icon-arrow-left',
              onClick: _cache[12] || (_cache[12] = (...args) => (_ctx.leftPrevMonth && _ctx.leftPrevMonth(...args)))
            }),
            (_ctx.unlinkPanels)
              ? (vue.openBlock(), vue.createBlock('button', {
                  key: 0,
                  type: 'button',
                  disabled: !_ctx.enableYearArrow,
                  class: [{ 'is-disabled': !_ctx.enableYearArrow }, 'el-picker-panel__icon-btn el-icon-d-arrow-right'],
                  onClick: _cache[13] || (_cache[13] = (...args) => (_ctx.leftNextYear && _ctx.leftNextYear(...args)))
                }, null, 10 /* CLASS, PROPS */, ['disabled']))
              : vue.createCommentVNode('v-if', true),
            (_ctx.unlinkPanels)
              ? (vue.openBlock(), vue.createBlock('button', {
                  key: 1,
                  type: 'button',
                  disabled: !_ctx.enableMonthArrow,
                  class: [{ 'is-disabled': !_ctx.enableMonthArrow }, 'el-picker-panel__icon-btn el-icon-arrow-right'],
                  onClick: _cache[14] || (_cache[14] = (...args) => (_ctx.leftNextMonth && _ctx.leftNextMonth(...args)))
                }, null, 10 /* CLASS, PROPS */, ['disabled']))
              : vue.createCommentVNode('v-if', true),
            vue.createVNode('div', null, vue.toDisplayString(_ctx.leftLabel), 1 /* TEXT */)
          ]),
          vue.createVNode(_component_date_table, {
            'selection-mode': 'range',
            date: _ctx.leftDate,
            'min-date': _ctx.minDate,
            'max-date': _ctx.maxDate,
            'range-state': _ctx.rangeState,
            'disabled-date': _ctx.disabledDate,
            'cell-class-name': _ctx.cellClassName,
            onChangerange: _ctx.handleChangeRange,
            onPick: _ctx.handleRangePick,
            onSelect: _ctx.onSelect
          }, null, 8 /* PROPS */, ['date', 'min-date', 'max-date', 'range-state', 'disabled-date', 'cell-class-name', 'onChangerange', 'onPick', 'onSelect'])
        ]),
        vue.createVNode('div', _hoisted_14, [
          vue.createVNode('div', _hoisted_15, [
            (_ctx.unlinkPanels)
              ? (vue.openBlock(), vue.createBlock('button', {
                  key: 0,
                  type: 'button',
                  disabled: !_ctx.enableYearArrow,
                  class: [{ 'is-disabled': !_ctx.enableYearArrow }, 'el-picker-panel__icon-btn el-icon-d-arrow-left'],
                  onClick: _cache[15] || (_cache[15] = (...args) => (_ctx.rightPrevYear && _ctx.rightPrevYear(...args)))
                }, null, 10 /* CLASS, PROPS */, ['disabled']))
              : vue.createCommentVNode('v-if', true),
            (_ctx.unlinkPanels)
              ? (vue.openBlock(), vue.createBlock('button', {
                  key: 1,
                  type: 'button',
                  disabled: !_ctx.enableMonthArrow,
                  class: [{ 'is-disabled': !_ctx.enableMonthArrow }, 'el-picker-panel__icon-btn el-icon-arrow-left'],
                  onClick: _cache[16] || (_cache[16] = (...args) => (_ctx.rightPrevMonth && _ctx.rightPrevMonth(...args)))
                }, null, 10 /* CLASS, PROPS */, ['disabled']))
              : vue.createCommentVNode('v-if', true),
            vue.createVNode('button', {
              type: 'button',
              class: 'el-picker-panel__icon-btn el-icon-d-arrow-right',
              onClick: _cache[17] || (_cache[17] = (...args) => (_ctx.rightNextYear && _ctx.rightNextYear(...args)))
            }),
            vue.createVNode('button', {
              type: 'button',
              class: 'el-picker-panel__icon-btn el-icon-arrow-right',
              onClick: _cache[18] || (_cache[18] = (...args) => (_ctx.rightNextMonth && _ctx.rightNextMonth(...args)))
            }),
            vue.createVNode('div', null, vue.toDisplayString(_ctx.rightLabel), 1 /* TEXT */)
          ]),
          vue.createVNode(_component_date_table, {
            'selection-mode': 'range',
            date: _ctx.rightDate,
            'min-date': _ctx.minDate,
            'max-date': _ctx.maxDate,
            'range-state': _ctx.rangeState,
            'disabled-date': _ctx.disabledDate,
            'cell-class-name': _ctx.cellClassName,
            onChangerange: _ctx.handleChangeRange,
            onPick: _ctx.handleRangePick,
            onSelect: _ctx.onSelect
          }, null, 8 /* PROPS */, ['date', 'min-date', 'max-date', 'range-state', 'disabled-date', 'cell-class-name', 'onChangerange', 'onPick', 'onSelect'])
        ])
      ])
    ]),
    (_ctx.showTime)
      ? (vue.openBlock(), vue.createBlock('div', _hoisted_16, [
          vue.createVNode(_component_el_button, {
            size: 'mini',
            type: 'text',
            class: 'el-picker-panel__link-btn',
            onClick: _ctx.handleClear
          }, {
            default: vue.withCtx(() => [
              vue.createTextVNode(vue.toDisplayString(_ctx.t('el.datepicker.clear')), 1 /* TEXT */)
            ]),
            _: 1 /* STABLE */
          }, 8 /* PROPS */, ['onClick']),
          vue.createVNode(_component_el_button, {
            plain: '',
            size: 'mini',
            class: 'el-picker-panel__link-btn',
            disabled: _ctx.btnDisabled,
            onClick: _cache[19] || (_cache[19] = $event => (_ctx.handleConfirm(false)))
          }, {
            default: vue.withCtx(() => [
              vue.createTextVNode(vue.toDisplayString(_ctx.t('el.datepicker.confirm')), 1 /* TEXT */)
            ]),
            _: 1 /* STABLE */
          }, 8 /* PROPS */, ['disabled'])
        ]))
      : vue.createCommentVNode('v-if', true)
  ], 2 /* CLASS */))
}

script$4.render = render$4
script$4.__file = 'packages/date-picker/src/date-picker-com/panel-date-range.vue'

const script$5 = vue.defineComponent({
  components: { MonthTable: script$1 },
  props: {
    unlinkPanels: Boolean,
    parsedValue: {
      type: Array
    }
  },
  emits: ['pick', 'set-picker-option'],
  setup (props, ctx) {
    const leftDate = vue.ref(dayjs__default.default.tz())
    const rightDate = vue.ref(dayjs__default.default.tz().add(1, 'year'))
    const hasShortcuts = vue.computed(() => !!shortcuts.length)
    const handleShortcutClick = shortcut => {
      if (shortcut.value) {
        ctx.emit('pick', [dayjs__default.default.tz(shortcut.value[0]), dayjs__default.default.tz(shortcut.value[1])])
        return
      }
      if (shortcut.onClick) {
        shortcut.onClick(ctx)
      }
    }
    const leftPrevYear = () => {
      leftDate.value = leftDate.value.subtract(1, 'year')
      if (!props.unlinkPanels) {
        rightDate.value = rightDate.value.subtract(1, 'year')
      }
    }
    const rightNextYear = () => {
      if (!props.unlinkPanels) {
        leftDate.value = leftDate.value.add(1, 'year')
      }
      rightDate.value = rightDate.value.add(1, 'year')
    }
    const leftNextYear = () => {
      leftDate.value = leftDate.value.add(1, 'year')
    }
    const rightPrevYear = () => {
      rightDate.value = rightDate.value.subtract(1, 'year')
    }
    const leftLabel = vue.computed(() => {
      return `${leftDate.value.year()} ${locale.t('el.datepicker.year')}`
    })
    const rightLabel = vue.computed(() => {
      return `${rightDate.value.year()} ${locale.t('el.datepicker.year')}`
    })
    const leftYear = vue.computed(() => {
      return leftDate.value.year()
    })
    const rightYear = vue.computed(() => {
      return rightDate.value.year() === leftDate.value.year() ? leftDate.value.year() + 1 : rightDate.value.year()
    })
    const enableYearArrow = vue.computed(() => {
      return props.unlinkPanels && rightYear.value > leftYear.value + 1
    })
    const minDate = vue.ref(null)
    const maxDate = vue.ref(null)
    const rangeState = vue.ref({
      endDate: null,
      selecting: false
    })
    const handleChangeRange = val => {
      rangeState.value = val
    }
    const handleRangePick = (val, close = true) => {
      const minDate_ = val.minDate
      const maxDate_ = val.maxDate
      if (maxDate.value === maxDate_ && minDate.value === minDate_) {
        return
      }
      maxDate.value = maxDate_
      minDate.value = minDate_
      if (!close) { return }
      handleConfirm()
    }
    const isValidValue = value => {
      return Array.isArray(value) &&
                value && value[0] && value[1] &&
                value[0].valueOf() <= value[1].valueOf()
    }
    const handleConfirm = (visible = false) => {
      if (isValidValue([minDate.value, maxDate.value])) {
        ctx.emit('pick', [minDate.value, maxDate.value], visible)
      }
    }
    const onSelect = selecting => {
      rangeState.value.selecting = selecting
      if (!selecting) {
        rangeState.value.endDate = null
      }
    }
    const formatToString = value => {
      return value.map(_ => _.format(format))
    }
    const getDefaultValue = () => {
      let start
      if (Array.isArray(defaultValue)) {
        const left = dayjs__default.default.tz(defaultValue[0])
        let right = dayjs__default.default.tz(defaultValue[1])
        if (!props.unlinkPanels) {
          right = left.add(1, 'year')
        }
        return [left, right]
      } else if (defaultValue) {
        start = dayjs__default.default.tz(defaultValue)
      } else {
        start = dayjs__default.default.tz()
      }
      return [start, start.add(1, 'year')]
    }
    ctx.emit('set-picker-option', ['formatToString', formatToString])
    const pickerBase = vue.inject('EP_PICKER_BASE')
    const { shortcuts, disabledDate, format, defaultValue } = pickerBase.props
    vue.watch(() => props.parsedValue, newVal => {
      if (newVal && newVal.length === 2) {
        minDate.value = newVal[0]
        maxDate.value = newVal[1]
        leftDate.value = minDate.value
        if (props.unlinkPanels && maxDate.value) {
          const minDateYear = minDate.value.year()
          const maxDateYear = maxDate.value.year()
          rightDate.value = minDateYear === maxDateYear
            ? maxDate.value.add(1, 'year')
            : maxDate.value
        } else {
          rightDate.value = leftDate.value.add(1, 'year')
        }
      } else {
        const defaultArr = getDefaultValue()
        leftDate.value = defaultArr[0]
        rightDate.value = defaultArr[1]
      }
    }, { immediate: true })
    return {
      shortcuts,
      disabledDate,
      onSelect,
      handleRangePick,
      rangeState,
      handleChangeRange,
      minDate,
      maxDate,
      enableYearArrow,
      leftLabel,
      rightLabel,
      leftNextYear,
      leftPrevYear,
      rightNextYear,
      rightPrevYear,
      t: locale.t,
      leftDate,
      rightDate,
      hasShortcuts,
      handleShortcutClick
    }
  }
})

const _hoisted_1$5 = { class: 'el-picker-panel__body-wrapper' }
const _hoisted_2$3 = {
  key: 0,
  class: 'el-picker-panel__sidebar'
}
const _hoisted_3$3 = { class: 'el-picker-panel__body' }
const _hoisted_4$3 = { class: 'el-picker-panel__content el-date-range-picker__content is-left' }
const _hoisted_5$3 = { class: 'el-date-range-picker__header' }
const _hoisted_6$3 = { class: 'el-picker-panel__content el-date-range-picker__content is-right' }
const _hoisted_7$3 = { class: 'el-date-range-picker__header' }

function render$5 (_ctx, _cache, $props, $setup, $data, $options) {
  const _component_month_table = vue.resolveComponent('month-table')

  return (vue.openBlock(), vue.createBlock('div', {
    class: ['el-picker-panel el-date-range-picker', [{
      'has-sidebar': _ctx.$slots.sidebar || _ctx.hasShortcuts
    }]]
  }, [
    vue.createVNode('div', _hoisted_1$5, [
      vue.renderSlot(_ctx.$slots, 'sidebar', { class: 'el-picker-panel__sidebar' }),
      (_ctx.hasShortcuts)
        ? (vue.openBlock(), vue.createBlock('div', _hoisted_2$3, [
            (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.shortcuts, (shortcut, key) => {
              return (vue.openBlock(), vue.createBlock('button', {
                key: key,
                type: 'button',
                class: 'el-picker-panel__shortcut',
                onClick: $event => (_ctx.handleShortcutClick(shortcut))
              }, vue.toDisplayString(shortcut.text), 9 /* TEXT, PROPS */, ['onClick']))
            }), 128 /* KEYED_FRAGMENT */))
          ]))
        : vue.createCommentVNode('v-if', true),
      vue.createVNode('div', _hoisted_3$3, [
        vue.createVNode('div', _hoisted_4$3, [
          vue.createVNode('div', _hoisted_5$3, [
            vue.createVNode('button', {
              type: 'button',
              class: 'el-picker-panel__icon-btn el-icon-d-arrow-left',
              onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.leftPrevYear && _ctx.leftPrevYear(...args)))
            }),
            (_ctx.unlinkPanels)
              ? (vue.openBlock(), vue.createBlock('button', {
                  key: 0,
                  type: 'button',
                  disabled: !_ctx.enableYearArrow,
                  class: [{ 'is-disabled': !_ctx.enableYearArrow }, 'el-picker-panel__icon-btn el-icon-d-arrow-right'],
                  onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.leftNextYear && _ctx.leftNextYear(...args)))
                }, null, 10 /* CLASS, PROPS */, ['disabled']))
              : vue.createCommentVNode('v-if', true),
            vue.createVNode('div', null, vue.toDisplayString(_ctx.leftLabel), 1 /* TEXT */)
          ]),
          vue.createVNode(_component_month_table, {
            'selection-mode': 'range',
            date: _ctx.leftDate,
            'min-date': _ctx.minDate,
            'max-date': _ctx.maxDate,
            'range-state': _ctx.rangeState,
            'disabled-date': _ctx.disabledDate,
            onChangerange: _ctx.handleChangeRange,
            onPick: _ctx.handleRangePick,
            onSelect: _ctx.onSelect
          }, null, 8 /* PROPS */, ['date', 'min-date', 'max-date', 'range-state', 'disabled-date', 'onChangerange', 'onPick', 'onSelect'])
        ]),
        vue.createVNode('div', _hoisted_6$3, [
          vue.createVNode('div', _hoisted_7$3, [
            (_ctx.unlinkPanels)
              ? (vue.openBlock(), vue.createBlock('button', {
                  key: 0,
                  type: 'button',
                  disabled: !_ctx.enableYearArrow,
                  class: [{ 'is-disabled': !_ctx.enableYearArrow }, 'el-picker-panel__icon-btn el-icon-d-arrow-left'],
                  onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.rightPrevYear && _ctx.rightPrevYear(...args)))
                }, null, 10 /* CLASS, PROPS */, ['disabled']))
              : vue.createCommentVNode('v-if', true),
            vue.createVNode('button', {
              type: 'button',
              class: 'el-picker-panel__icon-btn el-icon-d-arrow-right',
              onClick: _cache[4] || (_cache[4] = (...args) => (_ctx.rightNextYear && _ctx.rightNextYear(...args)))
            }),
            vue.createVNode('div', null, vue.toDisplayString(_ctx.rightLabel), 1 /* TEXT */)
          ]),
          vue.createVNode(_component_month_table, {
            'selection-mode': 'range',
            date: _ctx.rightDate,
            'min-date': _ctx.minDate,
            'max-date': _ctx.maxDate,
            'range-state': _ctx.rangeState,
            'disabled-date': _ctx.disabledDate,
            onChangerange: _ctx.handleChangeRange,
            onPick: _ctx.handleRangePick,
            onSelect: _ctx.onSelect
          }, null, 8 /* PROPS */, ['date', 'min-date', 'max-date', 'range-state', 'disabled-date', 'onChangerange', 'onPick', 'onSelect'])
        ])
      ])
    ])
  ], 2 /* CLASS */))
}

script$5.render = render$5
script$5.__file = 'packages/date-picker/src/date-picker-com/panel-month-range.vue'

dayjs__default.default.extend(localeData__default.default)
dayjs__default.default.extend(advancedFormat__default.default)
dayjs__default.default.extend(customParseFormat__default.default)
dayjs__default.default.extend(weekOfYear__default.default)
dayjs__default.default.extend(weekYear__default.default)
dayjs__default.default.extend(dayOfYear__default.default)
dayjs__default.default.extend(isSameOrAfter__default.default)
dayjs__default.default.extend(isSameOrBefore__default.default)
const getPanel = function (type) {
  if (type === 'daterange' || type === 'datetimerange') {
    return script$4
  } else if (type === 'monthrange') {
    return script$5
  }
  return script$3
}
const DatePicker = vue.defineComponent({
  name: 'ElDatePicker',
  install: null,
  props: Object.assign(Object.assign({}, timePicker.defaultProps), {
    type: {
      type: String,
      default: 'date'
    }
  }),
  emits: ['update:modelValue'],
  setup (props, ctx) {
    vue.provide('ElPopperOptions', props.popperOptions)
    const commonPicker = vue.ref(null)
    const format = timePicker.DEFAULT_FORMATS_DATEPICKER[props.type] || timePicker.DEFAULT_FORMATS_DATE
    const refProps = Object.assign(Object.assign({}, props), {
      focus: () => {
        let _a;
        (_a = commonPicker.value) === null || _a === void 0 ? void 0 : _a.handleFocus()
      }
    })
    ctx.expose(refProps)
    return () => vue.h(timePicker.CommonPicker, Object.assign(Object.assign({ format }, props), { type: props.type, ref: commonPicker, 'onUpdate:modelValue': value => ctx.emit('update:modelValue', value) }), {
      default: scopedProps => vue.h(getPanel(props.type), scopedProps)
    })
  }
})

const _DatePicker = DatePicker
_DatePicker.install = app => {
  app.component(_DatePicker.name, _DatePicker)
}

exports.default = _DatePicker