element-ps 1.0.0-alpha.6 → 1.0.1

package/lib/el-date-picker/index.js

@@ -1,2228 +0,0 @@
-import { defineComponent, ref, computed, openBlock, createBlock, createVNode, toDisplayString, createCommentVNode, Fragment, renderList, watch, inject, resolveComponent, resolveDirective, renderSlot, withDirectives, vShow, withCtx, createTextVNode, provide, h } from 'vue';
-import dayjs from 'dayjs';
-import { rangeArr, TimePickPanel, extractTimeFormat, extractDateFormat, defaultProps, DEFAULT_FORMATS_DATEPICKER, DEFAULT_FORMATS_DATE, CommonPicker } from '../el-time-picker';
-import { t } from '../locale';
-import ElInput from '../el-input';
-import { ClickOutside } from '../directives';
-import { EVENT_CODE } from '../utils/aria';
-import ElButton from '../el-button';
-import { isValidDatePickType } from '../utils/validators';
-import { coerceTruthyValueToArray } from '../utils/util';
-import { hasClass } from '../utils/dom';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import advancedFormat from 'dayjs/plugin/advancedFormat';
-import localeData from 'dayjs/plugin/localeData';
-import weekOfYear from 'dayjs/plugin/weekOfYear';
-import weekYear from 'dayjs/plugin/weekYear';
-import dayOfYear from 'dayjs/plugin/dayOfYear';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
-
-var script = 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 = ref(null);
-        const lastColumn = ref(null);
-        const tableRows = ref([[], [], [], [], [], []]);
-        const firstDayOfWeek = props.date.$locale().weekStart || 7;
-        const WEEKS_CONSTANT = props.date.locale('en').localeData().weekdaysShort().map(_ => _.toLowerCase());
-        const offsetDay = computed(() => {
-            return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek;
-        });
-        const startDate = computed(() => {
-            const startDayOfMonth = props.date.startOf('month');
-            return startDayOfMonth.subtract(startDayOfMonth.day() || 7, 'day');
-        });
-        const WEEKS = computed(() => {
-            return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(firstDayOfWeek, firstDayOfWeek + 7);
-        });
-        const rows = computed(() => {
-            var _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' ? coerceTruthyValueToArray(props.parsedValue) : [];
-            const calNow = dayjs().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(date)
-                .isSame(props.date.date(Number(cell.text)), 'day');
-        };
-        const getCellClasses = cell => {
-            let 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
-                    ? coerceTruthyValueToArray(props.parsedValue).filter(_ => _.valueOf() !== newDate.valueOf())
-                    : 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,
-            rows,
-            isWeekActive,
-            getCellClasses,
-            WEEKS,
-            handleClick,
-        };
-    },
-});
-
-const _hoisted_1 = { key: 0 };
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), 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)))
-  }, [
-    createVNode("tbody", null, [
-      createVNode("tr", null, [
-        (_ctx.showWeekNumber)
-          ? (openBlock(), createBlock("th", _hoisted_1, toDisplayString(_ctx.t('el.datepicker.week')), 1 /* TEXT */))
-          : createCommentVNode("v-if", true),
-        (openBlock(true), createBlock(Fragment, null, renderList(_ctx.WEEKS, (week, key) => {
-          return (openBlock(), createBlock("th", { key: key }, toDisplayString(_ctx.t('el.datepicker.weeks.' + week)), 1 /* TEXT */))
-        }), 128 /* KEYED_FRAGMENT */))
-      ]),
-      (openBlock(true), createBlock(Fragment, null, renderList(_ctx.rows, (row, key) => {
-        return (openBlock(), createBlock("tr", {
-          key: key,
-          class: ["el-date-table__row", { current: _ctx.isWeekActive(row[1]) }]
-        }, [
-          (openBlock(true), createBlock(Fragment, null, renderList(row, (cell, key_) => {
-            return (openBlock(), createBlock("td", {
-              key: key_,
-              class: _ctx.getCellClasses(cell)
-            }, [
-              createVNode("div", null, [
-                createVNode("span", null, 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().startOf('month').month(month).year(year);
-    const numOfDays = firstDay.daysInMonth();
-    return rangeArr(numOfDays).map(n => firstDay.add(n, 'day').toDate());
-};
-var script$1 = 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 = ref(props.date.locale('en').localeData().monthsShort().map(_ => _.toLowerCase()));
-        const tableRows = ref([[], [], []]);
-        const lastRow = ref(null);
-        const lastColumn = ref(null);
-        const rows = computed(() => {
-            var _a;
-            const rows = tableRows.value;
-            const now = dayjs().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;
-                    let 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 = 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 (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,
-            months,
-        };
-    },
-});
-
-const _hoisted_1$1 = { class: "cell" };
-
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), 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)))
-  }, [
-    createVNode("tbody", null, [
-      (openBlock(true), createBlock(Fragment, null, renderList(_ctx.rows, (row, key) => {
-        return (openBlock(), createBlock("tr", { key: key }, [
-          (openBlock(true), createBlock(Fragment, null, renderList(row, (cell, key_) => {
-            return (openBlock(), createBlock("td", {
-              key: key_,
-              class: _ctx.getCellStyle(cell)
-            }, [
-              createVNode("div", null, [
-                createVNode("a", _hoisted_1$1, 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(String(year)).startOf('year');
-    const lastDay = firstDay.endOf('year');
-    const numOfDays = lastDay.dayOfYear();
-    return rangeArr(numOfDays).map(n => firstDay.add(n, 'day').toDate());
-};
-var script$2 = defineComponent({
-    props: {
-        disabledDate: {
-            type: Function,
-        },
-        parsedValue: {
-            type: Object,
-        },
-        date: {
-            type: Object,
-        },
-    },
-    emits: ['pick'],
-    setup(props, ctx) {
-        const startYear = computed(() => {
-            return Math.floor(props.date.year() / 10) * 10;
-        });
-        const getCellStyle = year => {
-            const style = {};
-            const today = dayjs();
-            style.disabled = props.disabledDate
-                ? datesInYear(year).every(props.disabledDate)
-                : false;
-            style.current = 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 (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__*/createVNode("td", null, null, -1 /* HOISTED */);
-const _hoisted_12 = /*#__PURE__*/createVNode("td", null, null, -1 /* HOISTED */);
-
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createBlock("table", {
-    class: "el-year-table",
-    onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleYearTableClick && _ctx.handleYearTableClick(...args)))
-  }, [
-    createVNode("tbody", null, [
-      createVNode("tr", null, [
-        createVNode("td", {
-          class: ["available", _ctx.getCellStyle(_ctx.startYear + 0)]
-        }, [
-          createVNode("a", _hoisted_1$2, toDisplayString(_ctx.startYear), 1 /* TEXT */)
-        ], 2 /* CLASS */),
-        createVNode("td", {
-          class: ["available", _ctx.getCellStyle(_ctx.startYear + 1)]
-        }, [
-          createVNode("a", _hoisted_2, toDisplayString(_ctx.startYear + 1), 1 /* TEXT */)
-        ], 2 /* CLASS */),
-        createVNode("td", {
-          class: ["available", _ctx.getCellStyle(_ctx.startYear + 2)]
-        }, [
-          createVNode("a", _hoisted_3, toDisplayString(_ctx.startYear + 2), 1 /* TEXT */)
-        ], 2 /* CLASS */),
-        createVNode("td", {
-          class: ["available", _ctx.getCellStyle(_ctx.startYear + 3)]
-        }, [
-          createVNode("a", _hoisted_4, toDisplayString(_ctx.startYear + 3), 1 /* TEXT */)
-        ], 2 /* CLASS */)
-      ]),
-      createVNode("tr", null, [
-        createVNode("td", {
-          class: ["available", _ctx.getCellStyle(_ctx.startYear + 4)]
-        }, [
-          createVNode("a", _hoisted_5, toDisplayString(_ctx.startYear + 4), 1 /* TEXT */)
-        ], 2 /* CLASS */),
-        createVNode("td", {
-          class: ["available", _ctx.getCellStyle(_ctx.startYear + 5)]
-        }, [
-          createVNode("a", _hoisted_6, toDisplayString(_ctx.startYear + 5), 1 /* TEXT */)
-        ], 2 /* CLASS */),
-        createVNode("td", {
-          class: ["available", _ctx.getCellStyle(_ctx.startYear + 6)]
-        }, [
-          createVNode("a", _hoisted_7, toDisplayString(_ctx.startYear + 6), 1 /* TEXT */)
-        ], 2 /* CLASS */),
-        createVNode("td", {
-          class: ["available", _ctx.getCellStyle(_ctx.startYear + 7)]
-        }, [
-          createVNode("a", _hoisted_8, toDisplayString(_ctx.startYear + 7), 1 /* TEXT */)
-        ], 2 /* CLASS */)
-      ]),
-      createVNode("tr", null, [
-        createVNode("td", {
-          class: ["available", _ctx.getCellStyle(_ctx.startYear + 8)]
-        }, [
-          createVNode("a", _hoisted_9, toDisplayString(_ctx.startYear + 8), 1 /* TEXT */)
-        ], 2 /* CLASS */),
-        createVNode("td", {
-          class: ["available", _ctx.getCellStyle(_ctx.startYear + 9)]
-        }, [
-          createVNode("a", _hoisted_10, 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;
-var script$3 = defineComponent({
-    components: {
-        DateTable: script, ElInput, ElButton, TimePickPanel, MonthTable: script$1, YearTable: script$2,
-    },
-    directives: { clickoutside: ClickOutside },
-    props: {
-        visible: {
-            type: Boolean,
-            default: false,
-        },
-        parsedValue: {
-            type: [Object, Array],
-        },
-        format: {
-            type: String,
-            default: '',
-        },
-        type: {
-            type: String,
-            required: true,
-            validator: isValidDatePickType,
-        },
-    },
-    emits: ['pick', 'set-picker-option'],
-    setup(props, ctx) {
-        const innerDate = ref(dayjs());
-        const month = computed(() => {
-            return innerDate.value.month();
-        });
-        const year = computed(() => {
-            return innerDate.value.year();
-        });
-        const selectableRange = ref([]);
-        const userInputDate = ref(null);
-        const userInputTime = 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(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 = ref('date');
-        const yearLabel = computed(() => {
-            const yearTranslation = 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(shortcut.value));
-                return;
-            }
-            if (shortcut.onClick) {
-                shortcut.onClick(ctx);
-            }
-        };
-        const selectionMode = computed(() => {
-            if (['week', 'month', 'year', 'dates'].includes(props.type)) {
-                return props.type;
-            }
-            return 'day';
-        });
-        watch(() => selectionMode.value, val => {
-            if (['month', 'year'].includes(val)) {
-                currentView.value = val;
-                return;
-            }
-            currentView.value = 'date';
-        }, { immediate: true });
-        const hasShortcuts = 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 = computed(() => props.type === 'datetime' || props.type === 'datetimerange');
-        const footerVisible = 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(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();
-            const nowDate = now.toDate();
-            if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) {
-                innerDate.value = dayjs();
-                emit(innerDate.value);
-            }
-        };
-        const timeFormat = computed(() => {
-            return extractTimeFormat(props.format);
-        });
-        const dateFormat = computed(() => {
-            return extractDateFormat(props.format);
-        });
-        const visibleTime = computed(() => {
-            if (userInputTime.value)
-                return userInputTime.value;
-            if (!props.parsedValue && !defaultValue)
-                return;
-            return (props.parsedValue || innerDate.value).format(timeFormat.value);
-        });
-        const visibleDate = computed(() => {
-            if (userInputDate.value)
-                return userInputDate.value;
-            if (!props.parsedValue && !defaultValue)
-                return;
-            return (props.parsedValue || innerDate.value).format(dateFormat.value);
-        });
-        const timePickerVisible = 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(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(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(value, props.format);
-        };
-        const getDefaultValue = () => {
-            return dayjs(defaultValue);
-        };
-        const handleKeydown = event => {
-            const { code, keyCode } = event;
-            const list = [EVENT_CODE.up, EVENT_CODE.down, EVENT_CODE.left, EVENT_CODE.right];
-            if (props.visible && !timePickerVisible.value) {
-                if (list.includes(code)) {
-                    handleKeyControl(keyCode);
-                    event.stopPropagation();
-                    event.preventDefault();
-                }
-                if (code === 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(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 = inject('EP_PICKER_BASE');
-        const { shortcuts, disabledDate, cellClassName, defaultTime, defaultValue, arrowControl } = pickerBase.props;
-        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,
-            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 = resolveComponent("el-input");
-  const _component_time_pick_panel = resolveComponent("time-pick-panel");
-  const _component_date_table = resolveComponent("date-table");
-  const _component_year_table = resolveComponent("year-table");
-  const _component_month_table = resolveComponent("month-table");
-  const _component_el_button = resolveComponent("el-button");
-  const _directive_clickoutside = resolveDirective("clickoutside");
-
-  return (openBlock(), createBlock("div", {
-    class: ["el-picker-panel el-date-picker", [{
-      'has-sidebar': _ctx.$slots.sidebar || _ctx.hasShortcuts,
-      'has-time': _ctx.showTime
-    }]]
-  }, [
-    createVNode("div", _hoisted_1$3, [
-      renderSlot(_ctx.$slots, "sidebar", { class: "el-picker-panel__sidebar" }),
-      (_ctx.hasShortcuts)
-        ? (openBlock(), createBlock("div", _hoisted_2$1, [
-            (openBlock(true), createBlock(Fragment, null, renderList(_ctx.shortcuts, (shortcut, key) => {
-              return (openBlock(), createBlock("button", {
-                key: key,
-                type: "button",
-                class: "el-picker-panel__shortcut",
-                onClick: $event => (_ctx.handleShortcutClick(shortcut))
-              }, toDisplayString(shortcut.text), 9 /* TEXT, PROPS */, ["onClick"]))
-            }), 128 /* KEYED_FRAGMENT */))
-          ]))
-        : createCommentVNode("v-if", true),
-      createVNode("div", _hoisted_3$1, [
-        (_ctx.showTime)
-          ? (openBlock(), createBlock("div", _hoisted_4$1, [
-              createVNode("span", _hoisted_5$1, [
-                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"])
-              ]),
-              withDirectives(createVNode("span", _hoisted_6$1, [
-                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"]),
-                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]
-              ])
-            ]))
-          : createCommentVNode("v-if", true),
-        withDirectives(createVNode("div", {
-          class: ["el-date-picker__header", { 'el-date-picker__header--bordered': _ctx.currentView === 'year' || _ctx.currentView === 'month' }]
-        }, [
-          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"]),
-          withDirectives(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"]), [
-            [vShow, _ctx.currentView === 'date']
-          ]),
-          createVNode("span", {
-            role: "button",
-            class: "el-date-picker__header-label",
-            onClick: _cache[5] || (_cache[5] = (...args) => (_ctx.showYearPicker && _ctx.showYearPicker(...args)))
-          }, toDisplayString(_ctx.yearLabel), 1 /* TEXT */),
-          withDirectives(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)))
-          }, toDisplayString(_ctx.t(`el.datepicker.month${ _ctx.month + 1 }`)), 3 /* TEXT, CLASS */), [
-            [vShow, _ctx.currentView === 'date']
-          ]),
-          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"]),
-          withDirectives(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"]), [
-            [vShow, _ctx.currentView === 'date']
-          ])
-        ], 2 /* CLASS */), [
-          [vShow, _ctx.currentView !== 'time']
-        ]),
-        createVNode("div", _hoisted_7$1, [
-          (_ctx.currentView === 'date')
-            ? (openBlock(), 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"]))
-            : createCommentVNode("v-if", true),
-          (_ctx.currentView === 'year')
-            ? (openBlock(), 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"]))
-            : createCommentVNode("v-if", true),
-          (_ctx.currentView === 'month')
-            ? (openBlock(), 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"]))
-            : createCommentVNode("v-if", true)
-        ])
-      ])
-    ]),
-    withDirectives(createVNode("div", _hoisted_8$1, [
-      withDirectives(createVNode(_component_el_button, {
-        size: "mini",
-        type: "text",
-        class: "el-picker-panel__link-btn",
-        onClick: _ctx.changeToNow
-      }, {
-        default: withCtx(() => [
-          createTextVNode(toDisplayString(_ctx.t('el.datepicker.now')), 1 /* TEXT */)
-        ]),
-        _: 1 /* STABLE */
-      }, 8 /* PROPS */, ["onClick"]), [
-        [vShow, _ctx.selectionMode !== 'dates']
-      ]),
-      createVNode(_component_el_button, {
-        plain: "",
-        size: "mini",
-        class: "el-picker-panel__link-btn",
-        onClick: _ctx.onConfirm
-      }, {
-        default: withCtx(() => [
-          createTextVNode(toDisplayString(_ctx.t('el.datepicker.confirm')), 1 /* TEXT */)
-        ]),
-        _: 1 /* STABLE */
-      }, 8 /* PROPS */, ["onClick"])
-    ], 512 /* NEED_PATCH */), [
-      [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";
-
-var script$4 = defineComponent({
-    directives: { clickoutside: ClickOutside },
-    components: { TimePickPanel, DateTable: script, ElInput, ElButton },
-    props: {
-        unlinkPanels: Boolean,
-        parsedValue: {
-            type: Array,
-        },
-        type: {
-            type: String,
-            required: true,
-            validator: isValidDatePickType,
-        },
-    },
-    emits: ['pick', 'set-picker-option'],
-    setup(props, ctx) {
-        const leftDate = ref(dayjs());
-        const rightDate = ref(dayjs().add(1, 'month'));
-        const minDate = ref(null);
-        const maxDate = ref(null);
-        const dateUserInput = ref({
-            min: null,
-            max: null,
-        });
-        const timeUserInput = ref({
-            min: null,
-            max: null,
-        });
-        const leftLabel = computed(() => {
-            return leftDate.value.year() + ' ' + t('el.datepicker.year') + ' ' + t(`el.datepicker.month${leftDate.value.month() + 1}`);
-        });
-        const rightLabel = computed(() => {
-            return rightDate.value.year() + ' ' + t('el.datepicker.year') + ' ' + t(`el.datepicker.month${rightDate.value.month() + 1}`);
-        });
-        const leftYear = computed(() => {
-            return leftDate.value.year();
-        });
-        const leftMonth = computed(() => {
-            return leftDate.value.month();
-        });
-        const rightYear = computed(() => {
-            return rightDate.value.year();
-        });
-        const rightMonth = computed(() => {
-            return rightDate.value.month();
-        });
-        const hasShortcuts = computed(() => !!shortcuts.length);
-        const minVisibleDate = computed(() => {
-            if (dateUserInput.value.min !== null)
-                return dateUserInput.value.min;
-            if (minDate.value)
-                return minDate.value.format(dateFormat.value);
-            return '';
-        });
-        const maxVisibleDate = 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 = computed(() => {
-            if (timeUserInput.value.min !== null)
-                return timeUserInput.value.min;
-            if (minDate.value)
-                return minDate.value.format(timeFormat.value);
-            return '';
-        });
-        const maxVisibleTime = 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 = computed(() => {
-            return extractTimeFormat(format);
-        });
-        const dateFormat = computed(() => {
-            return 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 = 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 = 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 = ref({
-            endDate: null,
-            selecting: false,
-        });
-        const btnDisabled = 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 = 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(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(shortcut.value[0]), dayjs(shortcut.value[1])]);
-                return;
-            }
-            if (shortcut.onClick) {
-                shortcut.onClick(ctx);
-            }
-        };
-        const minTimePickerVisible = ref(false);
-        const maxTimePickerVisible = ref(false);
-        const handleMinTimeClose = () => {
-            minTimePickerVisible.value = false;
-        };
-        const handleMaxTimeClose = () => {
-            maxTimePickerVisible.value = false;
-        };
-        const handleDateInput = (value, type) => {
-            dateUserInput.value[type] = value;
-            const parsedValueD = dayjs(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(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(_, format)) : dayjs(value, format);
-        };
-        const getDefaultValue = () => {
-            let start;
-            if (Array.isArray(defaultValue)) {
-                const left = dayjs(defaultValue[0]);
-                let right = dayjs(defaultValue[1]);
-                if (!props.unlinkPanels) {
-                    right = left.add(1, 'month');
-                }
-                return [left, right];
-            }
-            else if (defaultValue) {
-                start = dayjs(defaultValue);
-            }
-            else {
-                start = dayjs();
-            }
-            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 = inject('EP_PICKER_BASE');
-        const { shortcuts, disabledDate, cellClassName, format, defaultTime, defaultValue, arrowControl, clearable } = pickerBase.props;
-        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,
-            minVisibleDate,
-            maxVisibleDate,
-            minVisibleTime,
-            maxVisibleTime,
-            arrowControl,
-            handleDateInput,
-            handleDateChange,
-            handleTimeInput,
-            handleTimeChange,
-            handleMinTimePick,
-            handleMaxTimePick,
-            handleClear,
-            handleConfirm,
-            timeFormat,
-            clearable,
-        };
-    },
-});
-
-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__*/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 = resolveComponent("el-input");
-  const _component_time_pick_panel = resolveComponent("time-pick-panel");
-  const _component_date_table = resolveComponent("date-table");
-  const _component_el_button = resolveComponent("el-button");
-  const _directive_clickoutside = resolveDirective("clickoutside");
-
-  return (openBlock(), createBlock("div", {
-    class: ["el-picker-panel el-date-range-picker", [{
-      'has-sidebar': _ctx.$slots.sidebar || _ctx.hasShortcuts,
-      'has-time': _ctx.showTime
-    }]]
-  }, [
-    createVNode("div", _hoisted_1$4, [
-      renderSlot(_ctx.$slots, "sidebar", { class: "el-picker-panel__sidebar" }),
-      (_ctx.hasShortcuts)
-        ? (openBlock(), createBlock("div", _hoisted_2$2, [
-            (openBlock(true), createBlock(Fragment, null, renderList(_ctx.shortcuts, (shortcut, key) => {
-              return (openBlock(), createBlock("button", {
-                key: key,
-                type: "button",
-                class: "el-picker-panel__shortcut",
-                onClick: $event => (_ctx.handleShortcutClick(shortcut))
-              }, toDisplayString(shortcut.text), 9 /* TEXT, PROPS */, ["onClick"]))
-            }), 128 /* KEYED_FRAGMENT */))
-          ]))
-        : createCommentVNode("v-if", true),
-      createVNode("div", _hoisted_3$2, [
-        (_ctx.showTime)
-          ? (openBlock(), createBlock("div", _hoisted_4$2, [
-              createVNode("span", _hoisted_5$2, [
-                createVNode("span", _hoisted_6$2, [
-                  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"])
-                ]),
-                withDirectives(createVNode("span", _hoisted_7$2, [
-                  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"]),
-                  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,
-              createVNode("span", _hoisted_9$1, [
-                createVNode("span", _hoisted_10$1, [
-                  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"])
-                ]),
-                withDirectives(createVNode("span", _hoisted_11$1, [
-                  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"]),
-                  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]
-                ])
-              ])
-            ]))
-          : createCommentVNode("v-if", true),
-        createVNode("div", _hoisted_12$1, [
-          createVNode("div", _hoisted_13, [
-            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)))
-            }),
-            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)
-              ? (openBlock(), 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"]))
-              : createCommentVNode("v-if", true),
-            (_ctx.unlinkPanels)
-              ? (openBlock(), 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"]))
-              : createCommentVNode("v-if", true),
-            createVNode("div", null, toDisplayString(_ctx.leftLabel), 1 /* TEXT */)
-          ]),
-          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"])
-        ]),
-        createVNode("div", _hoisted_14, [
-          createVNode("div", _hoisted_15, [
-            (_ctx.unlinkPanels)
-              ? (openBlock(), 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"]))
-              : createCommentVNode("v-if", true),
-            (_ctx.unlinkPanels)
-              ? (openBlock(), 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"]))
-              : createCommentVNode("v-if", true),
-            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)))
-            }),
-            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)))
-            }),
-            createVNode("div", null, toDisplayString(_ctx.rightLabel), 1 /* TEXT */)
-          ]),
-          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)
-      ? (openBlock(), createBlock("div", _hoisted_16, [
-          (_ctx.clearable)
-            ? (openBlock(), createBlock(_component_el_button, {
-                key: 0,
-                size: "mini",
-                type: "text",
-                class: "el-picker-panel__link-btn",
-                onClick: _ctx.handleClear
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(_ctx.t('el.datepicker.clear')), 1 /* TEXT */)
-                ]),
-                _: 1 /* STABLE */
-              }, 8 /* PROPS */, ["onClick"]))
-            : createCommentVNode("v-if", true),
-          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: withCtx(() => [
-              createTextVNode(toDisplayString(_ctx.t('el.datepicker.confirm')), 1 /* TEXT */)
-            ]),
-            _: 1 /* STABLE */
-          }, 8 /* PROPS */, ["disabled"])
-        ]))
-      : 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";
-
-var script$5 = defineComponent({
-    components: { MonthTable: script$1 },
-    props: {
-        unlinkPanels: Boolean,
-        parsedValue: {
-            type: Array,
-        },
-    },
-    emits: ['pick', 'set-picker-option'],
-    setup(props, ctx) {
-        const leftDate = ref(dayjs());
-        const rightDate = ref(dayjs().add(1, 'year'));
-        const hasShortcuts = computed(() => !!shortcuts.length);
-        const handleShortcutClick = shortcut => {
-            if (shortcut.value) {
-                ctx.emit('pick', [dayjs(shortcut.value[0]), dayjs(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 = computed(() => {
-            return `${leftDate.value.year()} ${t('el.datepicker.year')}`;
-        });
-        const rightLabel = computed(() => {
-            return `${rightDate.value.year()} ${t('el.datepicker.year')}`;
-        });
-        const leftYear = computed(() => {
-            return leftDate.value.year();
-        });
-        const rightYear = computed(() => {
-            return rightDate.value.year() === leftDate.value.year() ? leftDate.value.year() + 1 : rightDate.value.year();
-        });
-        const enableYearArrow = computed(() => {
-            return props.unlinkPanels && rightYear.value > leftYear.value + 1;
-        });
-        const minDate = ref(null);
-        const maxDate = ref(null);
-        const rangeState = 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(defaultValue[0]);
-                let right = dayjs(defaultValue[1]);
-                if (!props.unlinkPanels) {
-                    right = left.add(1, 'year');
-                }
-                return [left, right];
-            }
-            else if (defaultValue) {
-                start = dayjs(defaultValue);
-            }
-            else {
-                start = dayjs();
-            }
-            return [start, start.add(1, 'year')];
-        };
-        ctx.emit('set-picker-option', ['formatToString', formatToString]);
-        const pickerBase = inject('EP_PICKER_BASE');
-        const { shortcuts, disabledDate, format, defaultValue } = pickerBase.props;
-        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,
-            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 = resolveComponent("month-table");
-
-  return (openBlock(), createBlock("div", {
-    class: ["el-picker-panel el-date-range-picker", [{
-      'has-sidebar': _ctx.$slots.sidebar || _ctx.hasShortcuts
-    }]]
-  }, [
-    createVNode("div", _hoisted_1$5, [
-      renderSlot(_ctx.$slots, "sidebar", { class: "el-picker-panel__sidebar" }),
-      (_ctx.hasShortcuts)
-        ? (openBlock(), createBlock("div", _hoisted_2$3, [
-            (openBlock(true), createBlock(Fragment, null, renderList(_ctx.shortcuts, (shortcut, key) => {
-              return (openBlock(), createBlock("button", {
-                key: key,
-                type: "button",
-                class: "el-picker-panel__shortcut",
-                onClick: $event => (_ctx.handleShortcutClick(shortcut))
-              }, toDisplayString(shortcut.text), 9 /* TEXT, PROPS */, ["onClick"]))
-            }), 128 /* KEYED_FRAGMENT */))
-          ]))
-        : createCommentVNode("v-if", true),
-      createVNode("div", _hoisted_3$3, [
-        createVNode("div", _hoisted_4$3, [
-          createVNode("div", _hoisted_5$3, [
-            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)
-              ? (openBlock(), 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"]))
-              : createCommentVNode("v-if", true),
-            createVNode("div", null, toDisplayString(_ctx.leftLabel), 1 /* TEXT */)
-          ]),
-          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"])
-        ]),
-        createVNode("div", _hoisted_6$3, [
-          createVNode("div", _hoisted_7$3, [
-            (_ctx.unlinkPanels)
-              ? (openBlock(), 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"]))
-              : createCommentVNode("v-if", true),
-            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)))
-            }),
-            createVNode("div", null, toDisplayString(_ctx.rightLabel), 1 /* TEXT */)
-          ]),
-          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.extend(localeData);
-dayjs.extend(advancedFormat);
-dayjs.extend(customParseFormat);
-dayjs.extend(weekOfYear);
-dayjs.extend(weekYear);
-dayjs.extend(dayOfYear);
-dayjs.extend(isSameOrAfter);
-dayjs.extend(isSameOrBefore);
-const getPanel = function (type) {
-    if (type === 'daterange' || type === 'datetimerange') {
-        return script$4;
-    }
-    else if (type === 'monthrange') {
-        return script$5;
-    }
-    return script$3;
-};
-var DatePicker = defineComponent({
-    name: 'ElDatePicker',
-    install: null,
-    props: Object.assign(Object.assign({}, defaultProps), { type: {
-            type: String,
-            default: 'date',
-        } }),
-    emits: ['update:modelValue'],
-    setup(props, ctx) {
-        provide('ElPopperOptions', props.popperOptions);
-        const commonPicker = ref(null);
-        const refProps = Object.assign(Object.assign({}, props), { focus: () => {
-                var _a;
-                (_a = commonPicker.value) === null || _a === void 0 ? void 0 : _a.handleFocus();
-            } });
-        ctx.expose(refProps);
-        return () => {
-            var _a;
-            const format = (_a = props.format) !== null && _a !== void 0 ? _a : (DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE);
-            return h(CommonPicker, Object.assign(Object.assign({}, props), { format, type: props.type, ref: commonPicker, 'onUpdate:modelValue': value => ctx.emit('update:modelValue', value) }), {
-                default: scopedProps => h(getPanel(props.type), scopedProps),
-            });
-        };
-    },
-});
-
-const _DatePicker = DatePicker;
-_DatePicker.install = app => {
-    app.component(_DatePicker.name, _DatePicker);
-};
-
-export default _DatePicker;