@opentiny/vue-renderless 3.21.1 → 3.22.0

package/date-panel/index.js

@@ -3,28 +3,30 @@ import {
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
 import { getWeekData } from "../picker";
-import debounce from "../common/deps/debounce";
 import {
-  isDate,
-  parseDate,
+  debounce,
+  isDate1,
+  parseDate1,
   modifyDate,
   modifyTime,
   clearTime,
   prevYear,
   nextYear,
   prevMonth,
-  nextMonth,
+  nextMonth1,
   timeWithinRange,
   clearMilliseconds,
   modifyWithTimeString,
   changeYearMonthAndClampDate,
   formatDate,
-  extractTimeFormat
-} from "../common/deps/date-util";
-import { DATEPICKER } from "../common";
-import { on, off } from "../common/deps/dom";
-import { getDateWithNewTimezone, getLocalTimezone } from "../common/date";
-import { fillChar } from "../common/string";
+  extractTimeFormat,
+  DATEPICKER,
+  fillChar,
+  on,
+  off,
+  getDateWithNewTimezone,
+  getLocalTimezone
+} from "@opentiny/utils";
 const getYearLabel = ({ state, t }) => () => {
   const { YearI18n, Year, PanelYearNum } = DATEPICKER;
   const yearTranslation = t(YearI18n);
@@ -41,14 +43,14 @@ const watchValue = ({ api, state }) => (value) => {
   if ([DATEPICKER.Dates, DATEPICKER.Years].includes(state.selectionMode) && state.value) {
     return;
   }
-  if (isDate(value)) {
+  if (isDate1(value)) {
     state.date = state.selectionMode === "week" ? getWeekData(value) : new Date(value);
   } else {
     state.date = api.getDefaultValue();
   }
 };
 const watchDefaultValue = ({ state }) => (value) => {
-  if (!isDate(state.value)) {
+  if (!isDate1(state.value)) {
     state.date = value ? new Date(value) : /* @__PURE__ */ new Date();
   }
 };
@@ -118,10 +120,29 @@ const cusEmit = ({ state, emit }) => (value, ...args) => {
   state.userInputDate = null;
   state.userInputTime = null;
 };
-const showMonthPicker = ({ state }) => () => state.currentView = DATEPICKER.Month;
-const showYearPicker = ({ state }) => () => state.currentView = DATEPICKER.Year;
+const panelEmit = ({ state, emit, t, props }) => (value, ...args) => {
+  state.date = value;
+  state.value = value;
+  let format;
+  if (props.type === "month") {
+    format = props.format || DATEPICKER.DateFormats.month;
+  } else if (props.type === "year") {
+    format = props.format || DATEPICKER.DateFormats.year;
+  } else {
+    format = props.format;
+  }
+  const formatVal = formatDate(value, format, t);
+  emit("select-change", formatVal, ...args);
+  emit("update:modelValue", formatVal, ...args);
+};
+const showHeaderPicker = ({ state, props }) => (type) => {
+  if (props.readonly) {
+    return;
+  }
+  state.currentView = DATEPICKER[type];
+};
 const cusPrevMonth = ({ state }) => () => state.date = prevMonth(state.date);
-const cusNextMonth = ({ state }) => () => state.date = nextMonth(state.date);
+const cusNextMonth = ({ state }) => () => state.date = nextMonth1(state.date);
 const cusPrevYear = ({ state }) => () => {
   if (state.currentView === DATEPICKER.Year) {
     state.startYear = state.startYear - DATEPICKER.PanelYearNum;
@@ -136,11 +157,25 @@ const cusNextYear = ({ state }) => () => {
     state.date = nextYear(state.date);
   }
 };
-const handleShortcutClick = (api) => (shortcut) => {
+const handleShortcutClick = (api, props, state) => (shortcut) => {
   if (shortcut.onClick) {
     const picker = {
       $emit: (type, start, end) => {
-        api.doPick(start, end);
+        var _a;
+        if ((_a = props.shortcuts) == null ? void 0 : _a.length) {
+          if (props.type === "month") {
+            state.date = start;
+            api.handleMonthPick(start.getMonth());
+          } else if (props.type === "year") {
+            state.date = start;
+            state.startYear = Math.floor(start.getFullYear() / 10) * 10;
+            api.handleYearPick(start.getFullYear());
+          } else {
+            api.handleDatePick(start, end);
+          }
+        } else {
+          api.doPick(start, end);
+        }
       }
     };
     shortcut.onClick(picker);
@@ -150,7 +185,7 @@ const doPick = (emit) => (date) => {
   emit("pick", date, false);
 };
 const handleTimePick = ({ api, state, t }) => (value, visible, first) => {
-  if (isDate(value)) {
+  if (isDate1(value)) {
     const newDate = state.value ? modifyTime(state.value, value.getHours(), value.getMinutes(), value.getSeconds()) : modifyWithTimeString(api.getDefaultValue(), state.defaultTime, t);
     state.date = newDate;
     api.cusEmit(state.date, true);
@@ -164,7 +199,17 @@ const handleTimePick = ({ api, state, t }) => (value, visible, first) => {
 const handleTimePickClose = (state) => () => {
   state.timePickerVisible = false;
 };
-const handleMonthPick = ({ api, state }) => (month) => {
+const handleMonthPick = ({ api, state, props, t }) => (month) => {
+  if (props.readonly) {
+    return;
+  }
+  if (props.type === DATEPICKER.Month) {
+    state.date = modifyDate(state.date, state.date.getFullYear(), month, 2);
+    state.value = state.date;
+    api.cusEmit(state.date);
+    api.panelEmit(state.date, t, props);
+    return;
+  }
   if (state.selectionMode === DATEPICKER.Month) {
     state.date = modifyDate(state.date, state.year, month, 1);
     api.cusEmit(state.date);
@@ -173,7 +218,10 @@ const handleMonthPick = ({ api, state }) => (month) => {
     state.currentView = DATEPICKER.Date;
   }
 };
-const handleDatePick = ({ api, state, t }) => (value) => {
+const handleDatePick = ({ api, state, t, props }) => (value) => {
+  if (props.readonly) {
+    return;
+  }
   if (state.selectionMode === DATEPICKER.Day) {
     let newDate = state.value ? modifyDate(state.value, value.getFullYear(), value.getMonth(), value.getDate()) : modifyWithTimeString(value, state.defaultTime, t);
     if (!api.checkDateWithinRange(newDate)) {
@@ -186,11 +234,13 @@ const handleDatePick = ({ api, state, t }) => (value) => {
   } else if (state.selectionMode === DATEPICKER.Dates) {
     api.cusEmit(value, true);
   }
+  api.panelEmit(state.date, t, props);
 };
-const handleYearPick = ({ api, state }) => (value) => {
+const handleYearPick = ({ api, state, props, t }) => (value) => {
   if (state.selectionMode === DATEPICKER.Year) {
     state.date = modifyDate(state.date, value, 0, 2);
     api.cusEmit(state.date);
+    api.panelEmit(state.date, t, props);
   } else if ([DATEPICKER.Years].includes(state.selectionMode)) {
     state.date = value.map((year) => new Date(year, 0, 2));
     api.cusEmit(state.date, state.selectionMode === DATEPICKER.YearRange ? value.length < 2 : true);
@@ -326,7 +376,7 @@ const handleKeyControl = ({ state, emit }) => (keyCode) => {
   }
 };
 const handleVisibleTimeChange = ({ api, vm, state, t }) => (value) => {
-  const time = parseDate(value, state.timeFormat, t);
+  const time = parseDate1(value, state.timeFormat, t);
   if (time && api.checkDateWithinRange(time)) {
     state.date = modifyDate(time, state.year, state.month, state.monthDate);
     state.userInputTime = null;
@@ -338,7 +388,7 @@ const handleVisibleTimeChange = ({ api, vm, state, t }) => (value) => {
   }
 };
 const handleVisibleDateChange = ({ api, state, t }) => (value) => {
-  const date = parseDate(value, state.dateFormat, t);
+  const date = parseDate1(value, state.dateFormat, t);
   if (date) {
     if (typeof state.disabledDate === "function" && state.disabledDate(date)) {
       return;
@@ -470,12 +520,12 @@ export {
   handleVisibleTimeChange,
   handleYearPick,
   isValidValue,
+  panelEmit,
   proxyTimePickerDataProperties,
   resetView,
   searchTz,
   selectTz,
-  showMonthPicker,
-  showYearPicker,
+  showHeaderPicker,
   toggleTz,
   watchDefaultValue,
   watchSelectionMode,

package/date-panel/vue.js

@@ -22,11 +22,11 @@ import {
   handleLeave,
   handleEnter,
   getYearLabel,
-  showYearPicker,
-  showMonthPicker,
+  showHeaderPicker,
   handleTimePick,
   checkDateWithinRange,
   cusEmit,
+  panelEmit,
   getDefaultValue,
   isValidValue,
   handleVisibleDateChange,
@@ -47,8 +47,7 @@ import {
   getDisabledConfirm,
   getNowTime
 } from "./index";
-import { getWeekNumber, extractDateFormat } from "../common/deps/date-util";
-import { DATEPICKER, DATE } from "../common";
+import { DATEPICKER, DATE, toDate1, getWeekNumber, modifyDate, extractDateFormat } from "@opentiny/utils";
 const api = [
   "state",
   "isValidValue",
@@ -65,8 +64,7 @@ const api = [
   "handleMonthPick",
   "handleYearPick",
   "handleDatePick",
-  "showMonthPicker",
-  "showYearPicker",
+  "showHeaderPicker",
   "handleTimePick",
   "handleEnter",
   "handleVisibleTimeChange",
@@ -76,23 +74,23 @@ const api = [
   "handleTimePickClose",
   "getNowTime"
 ];
-const initState = ({ reactive, computed, api: api2, i18n, designConfig }) => {
+const initState = ({ reactive, computed, api: api2, i18n, designConfig, props }) => {
   var _a, _b;
   const state = reactive({
-    popperClass: "",
+    popperClass: props.popperClass || "",
     date: /* @__PURE__ */ new Date(),
     value: "",
     defaultValue: null,
     defaultTime: null,
-    showTime: false,
+    showTime: props.type === "datetimerange" || false,
     selectionMode: DATEPICKER.Day,
-    shortcuts: "",
+    shortcuts: props.shortcuts || [],
     visible: false,
     currentView: DATEPICKER.Date,
-    disabledDate: "",
+    disabledDate: props.disabledDate || null,
     cellClassName: "",
     selectableRange: [],
-    firstDayOfWeek: 7,
+    firstDayOfWeek: props.firstDayOfWeek || 7,
     showWeekNumber: false,
     timePickerVisible: false,
     format: "",
@@ -128,7 +126,41 @@ const initState = ({ reactive, computed, api: api2, i18n, designConfig }) => {
   state.needChangeTimezoneData = true;
   return state;
 };
-const initWatch = ({ watch, state, api: api2, nextTick }) => {
+const initWatch = ({ watch, state, api: api2, nextTick, props }) => {
+  watch(
+    () => props.modelValue,
+    (value) => {
+      let newVal;
+      const val = toDate1(value);
+      if (val) {
+        const localOffset = val.getTimezoneOffset() * 6e4;
+        newVal = toDate1(val - localOffset);
+      }
+      if (newVal) {
+        const newDate = modifyDate(newVal, newVal.getFullYear(), newVal.getMonth(), newVal.getUTCDate() + 1);
+        state.date = newDate;
+        state.value = newDate;
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.type,
+    (value) => {
+      if (["date", "month", "year"].includes(value)) {
+        state.selectionMode = value;
+        state.currentView = value;
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.format,
+    (value) => {
+      state.format = value;
+    },
+    { immediate: true }
+  );
   watch(
     () => state.isShowTz,
     () => {
@@ -166,17 +198,17 @@ const initApi = ({ api: api2, state, t, emit, nextTick, vm, watch, props }) => {
     selectTz: selectTz({ emit, state }),
     handleTzPickClose: handleTzPickClose(state),
     getDefaultValue: getDefaultValue(state),
-    showYearPicker: showYearPicker({ state }),
+    showHeaderPicker: showHeaderPicker({ state, props }),
     handleTimePickClose: handleTimePickClose(state),
     cusNextMonth: cusNextMonth({ state }),
     cusPrevMonth: cusPrevMonth({ state }),
     resetView: resetView({ state }),
-    showMonthPicker: showMonthPicker({ state }),
     cusNextYear: cusNextYear({ state }),
     cusPrevYear: cusPrevYear({ state }),
     watchDefaultValue: watchDefaultValue({ state }),
     getYearLabel: getYearLabel({ state, t }),
     cusEmit: cusEmit({ state, emit }),
+    panelEmit: panelEmit({ state, emit, t, props }),
     watchTimePickerVisible: watchTimePickerVisible({ nextTick, vm }),
     checkDateWithinRange: checkDateWithinRange({ state }),
     watchSelectionMode: watchSelectionMode({ state }),
@@ -192,13 +224,13 @@ const initApi = ({ api: api2, state, t, emit, nextTick, vm, watch, props }) => {
     watchValue: watchValue({ api: api2, state }),
     handleKeydown: handleKeydown({ api: api2, state }),
     confirm: confirm({ api: api2, state, t }),
-    handleMonthPick: handleMonthPick({ api: api2, state }),
+    handleMonthPick: handleMonthPick({ api: api2, state, props, t, emit }),
     handleVisibleDateChange: handleVisibleDateChange({ api: api2, state, t }),
     handleTimePick: handleTimePick({ api: api2, state, t }),
-    handleYearPick: handleYearPick({ api: api2, state }),
-    handleDatePick: handleDatePick({ api: api2, state, t }),
+    handleYearPick: handleYearPick({ api: api2, state, props, t }),
+    handleDatePick: handleDatePick({ api: api2, state, t, props }),
     computerVisibleTime: computerVisibleTime({ state, t }),
-    handleShortcutClick: handleShortcutClick(api2),
+    handleShortcutClick: handleShortcutClick(api2, props, state),
     computerVisibleDate: computerVisibleDate({ state, t }),
     handleVisibleTimeChange: handleVisibleTimeChange({ api: api2, vm, state, t }),
     computerTimeFormat: computerTimeFormat({ state }),
@@ -210,9 +242,9 @@ const initApi = ({ api: api2, state, t, emit, nextTick, vm, watch, props }) => {
 const renderless = (props, { computed, reactive, watch, nextTick }, { t, emit: $emit, vm, i18n, designConfig }) => {
   const api2 = {};
   const emit = props.emitter ? props.emitter.emit : $emit;
-  const state = initState({ reactive, computed, api: api2, i18n, designConfig });
+  const state = initState({ reactive, computed, api: api2, i18n, designConfig, props });
   initApi({ api: api2, state, t, emit, nextTick, vm, watch, props });
-  initWatch({ watch, state, api: api2, nextTick });
+  initWatch({ watch, state, api: api2, nextTick, props, t });
   return api2;
 };
 export {

package/date-picker/vue.js

@@ -16,7 +16,7 @@ import {
   onChange,
   updateColumnValue
 } from "./index";
-import { DATE } from "../common";
+import { DATE } from "@opentiny/utils";
 const api = [
   "state",
   "clearDisplayValue",

package/date-picker-mobile/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { format } from "../common/date";
+import { formatDateByPattern as format } from "@opentiny/utils";
 const getFormatTime = (time) => {
   return ("0" + time).slice(-2);
 };

package/date-range/index.js

@@ -1,17 +1,18 @@
 import "../chunk-G2ADBYYC.js";
 import {
-  isDate,
+  toDate1,
   nextDate,
-  parseDate,
+  parseDate1,
   formatDate,
   modifyDate,
   modifyTime,
   nextYear,
   prevYear,
-  nextMonth,
+  nextMonth1,
   prevMonth,
-  modifyWithTimeString
-} from "../common/deps/date-util";
+  modifyWithTimeString,
+  DATEPICKER
+} from "@opentiny/utils";
 const calcDefaultValue = (defaultVal) => {
   if (Array.isArray(defaultVal)) {
     return [new Date(defaultVal[0]), new Date(defaultVal[1])];
@@ -57,9 +58,9 @@ const getMaxVisibleTime = ({ state, t }) => () => {
   return "";
 };
 const getEnableMonthArrow = (state) => () => {
-  const nextMonth2 = (state.leftMonth + 1) % 12;
+  const nextMonth = (state.leftMonth + 1) % 12;
   const yearOffset = state.leftMonth + 1 >= 12 ? 1 : 0;
-  return state.unlinkPanels && new Date(state.leftYear + yearOffset, nextMonth2) < new Date(state.rightYear, state.rightMonth);
+  return state.unlinkPanels && new Date(state.leftYear + yearOffset, nextMonth) < new Date(state.rightYear, state.rightMonth);
 };
 const watchMinDate = ({ state, t, vm }) => (value) => {
   state.dateUserInput.min = null;
@@ -71,7 +72,7 @@ const watchMinDate = ({ state, t, vm }) => (value) => {
   if (state.maxDate && state.maxDate < state.minDate) {
     const format = "HH:mm:ss";
     minTimePicker.state.selectableRange = [
-      [parseDate(formatDate(state.minDate, format, t), format, t), parseDate("23:59:59", format, t)]
+      [parseDate1(formatDate(state.minDate, format, t), format, t), parseDate1("23:59:59", format, t)]
     ];
   }
   if (value) {
@@ -105,8 +106,8 @@ const watchValue = ({ state }) => (value) => {
     state.minDate = null;
     state.maxDate = null;
   } else if (Array.isArray(value)) {
-    state.minDate = isDate(value[0]) ? new Date(value[0]) : null;
-    state.maxDate = isDate(value[1]) ? new Date(value[1]) : null;
+    state.minDate = toDate1(value[0]) ? new Date(value[0]) : null;
+    state.maxDate = toDate1(value[1]) ? new Date(value[1]) : null;
     if (state.minDate) {
       state.leftDate = state.minDate;
       if (state.unlinkPanels && state.maxDate) {
@@ -114,13 +115,13 @@ const watchValue = ({ state }) => (value) => {
         const minDateMonth = state.minDate.getMonth();
         const maxDateYear = state.maxDate.getFullYear();
         const maxDateMonth = state.maxDate.getMonth();
-        state.rightDate = minDateYear === maxDateYear && minDateMonth === maxDateMonth ? nextMonth(state.maxDate) : state.maxDate;
+        state.rightDate = minDateYear === maxDateYear && minDateMonth === maxDateMonth ? nextMonth1(state.maxDate) : state.maxDate;
       } else {
-        state.rightDate = nextMonth(state.leftDate);
+        state.rightDate = nextMonth1(state.leftDate);
       }
     } else {
       state.leftDate = calcDefaultValue(state.defaultValue)[0];
-      state.rightDate = nextMonth(state.leftDate);
+      state.rightDate = nextMonth1(state.leftDate);
     }
   }
 };
@@ -128,19 +129,22 @@ const watchDefault = ({ state }) => (value) => {
   if (!Array.isArray(state.value)) {
     const [left, right] = calcDefaultValue(value);
     state.leftDate = left;
-    state.rightDate = value && value[1] && state.unlinkPanels ? right : nextMonth(state.leftDate);
+    state.rightDate = value && value[1] && state.unlinkPanels ? right : nextMonth1(state.leftDate);
   }
 };
 const handleClear = ({ emit, state }) => () => {
   state.minDate = null;
   state.maxDate = null;
   state.leftDate = calcDefaultValue(state.defaultValue)[0];
-  state.rightDate = nextMonth(state.leftDate);
+  state.rightDate = nextMonth1(state.leftDate);
   state.rangeState.selecting = false;
   state.rangeState.endDate = null;
   emit("pick", null);
 };
-const handleChangeRange = (state) => (val) => {
+const handleChangeRange = (state, props) => (val) => {
+  if (props.readonly) {
+    return;
+  }
   state.minDate = val.minDate;
   state.maxDate = val.maxDate;
   state.rangeState = val.rangeState;
@@ -150,7 +154,7 @@ const handleDateInput = ({ state, t }) => (value, type) => {
   if (value.length !== state.dateFormat.length) {
     return;
   }
-  const parsedValue = parseDate(value, state.dateFormat, t);
+  const parsedValue = parseDate1(value, state.dateFormat, t);
   if (parsedValue) {
     if (typeof state.disabledDate === "function" && state.disabledDate(new Date(parsedValue))) {
       return;
@@ -164,7 +168,7 @@ const handleDateInput = ({ state, t }) => (value, type) => {
       );
       state.leftDate = new Date(parsedValue);
       if (!state.unlinkPanels) {
-        state.rightDate = nextMonth(state.leftDate);
+        state.rightDate = nextMonth1(state.leftDate);
       }
     } else {
       state.maxDate = modifyDate(
@@ -181,7 +185,7 @@ const handleDateInput = ({ state, t }) => (value, type) => {
   }
 };
 const handleDateChange = ({ state, t }) => (value, type) => {
-  const parsedValue = parseDate(value, state.dateFormat, t);
+  const parsedValue = parseDate1(value, state.dateFormat, t);
   if (parsedValue) {
     if (type === "min") {
       state.minDate = modifyDate(
@@ -211,7 +215,7 @@ const handleTimeInput = ({ state, t }) => (value, type) => {
   if (value.length !== state.timeFormat.length) {
     return;
   }
-  const parsedValue = parseDate(value, state.timeFormat, t);
+  const parsedValue = parseDate1(value, state.timeFormat, t);
   if (parsedValue) {
     if (type === "min") {
       state.minDate = modifyTime(
@@ -231,7 +235,7 @@ const handleTimeInput = ({ state, t }) => (value, type) => {
   }
 };
 const handleTimeChange = ({ state, t, vm }) => (value, type) => {
-  const parsedValue = parseDate(value, state.timeFormat, t);
+  const parsedValue = parseDate1(value, state.timeFormat, t);
   if (parsedValue) {
     if (type === "min") {
       state.minDate = modifyTime(
@@ -260,7 +264,10 @@ const handleTimeChange = ({ state, t, vm }) => (value, type) => {
     }
   }
 };
-const handleRangePick = ({ api, state, t }) => (val, close = true) => {
+const handleRangePick = ({ api, state, props, t }) => (val, close = true) => {
+  if (props.readonly) {
+    return;
+  }
   const defaultTime = state.defaultTime || [];
   let minDateVal = val.minDate;
   let maxDateVal = val.maxDate;
@@ -288,15 +295,15 @@ const handleRangePick = ({ api, state, t }) => (val, close = true) => {
   }
   api.handleConfirm();
 };
-const handleShortcutClick = (state, api) => (shortcut) => {
+const handleShortcutClick = (state, api, props) => (shortcut) => {
   if (shortcut.type) {
     state.singleSelect = true;
     state.shortcutType = shortcut.type;
     state.shortcutText = shortcut.text;
-    if (shortcut.type === "startFrom" && shortcut.endDate && isDate(shortcut.endDate)) {
+    if (shortcut.type === "startFrom" && shortcut.endDate && toDate1(shortcut.endDate)) {
       state.maxRangeDate = shortcut.endDate;
     }
-    if (shortcut.type === "endAt" && shortcut.startDate && isDate(shortcut.startDate)) {
+    if (shortcut.type === "endAt" && shortcut.startDate && toDate1(shortcut.startDate)) {
       state.minRangeDate = shortcut.startDate;
     }
     state.value = [];
@@ -305,7 +312,15 @@ const handleShortcutClick = (state, api) => (shortcut) => {
   if (shortcut.onClick) {
     const picker = {
       $emit: (type, [start, end]) => {
-        api.doPick(start, end);
+        var _a;
+        if ((_a = props.shortcuts) == null ? void 0 : _a.length) {
+          state.value = [start, end];
+          state.leftDate = start;
+          state.rightDate = end;
+          api.handleRangePick({ minDate: start, maxDate: end });
+        } else {
+          api.doPick(start, end);
+        }
       }
     };
     shortcut.onClick(picker);
@@ -342,45 +357,50 @@ const handleMaxTimeClose = (state) => () => state.maxTimePickerVisible = false;
 const leftPrevYear = ({ state }) => () => {
   state.leftDate = prevYear(state.leftDate);
   if (!state.unlinkPanels) {
-    state.rightDate = nextMonth(state.leftDate);
+    state.rightDate = nextMonth1(state.leftDate);
   }
 };
 const leftPrevMonth = ({ state }) => () => {
   state.leftDate = prevMonth(state.leftDate);
   if (!state.unlinkPanels) {
-    state.rightDate = nextMonth(state.leftDate);
+    state.rightDate = nextMonth1(state.leftDate);
   }
 };
 const rightNextYear = ({ state }) => () => {
   const { leftDate, rightDate, unlinkPanels } = state;
   if (!unlinkPanels) {
     state.leftDate = nextYear(leftDate);
-    state.rightDate = nextMonth(state.leftDate);
+    state.rightDate = nextMonth1(state.leftDate);
   } else {
     state.rightDate = nextYear(rightDate);
   }
 };
 const rightNextMonth = ({ state }) => () => {
   if (!state.unlinkPanels) {
-    state.leftDate = nextMonth(state.leftDate);
-    state.rightDate = nextMonth(state.leftDate);
+    state.leftDate = nextMonth1(state.leftDate);
+    state.rightDate = nextMonth1(state.leftDate);
   } else {
-    state.rightDate = nextMonth(state.rightDate);
+    state.rightDate = nextMonth1(state.rightDate);
   }
 };
 const leftNextYear = ({ state }) => () => state.leftDate = nextYear(state.leftDate);
-const leftNextMonth = ({ state }) => () => state.leftDate = nextMonth(state.leftDate);
+const leftNextMonth = ({ state }) => () => state.leftDate = nextMonth1(state.leftDate);
 const rightPrevYear = ({ state }) => () => state.rightDate = prevYear(state.rightDate);
 const rightPrevMonth = ({ state }) => () => state.rightDate = prevMonth(state.rightDate);
-const handleConfirm = ({ api, emit, state }) => (visible = false) => {
+const handleConfirm = ({ api, emit, state, props, t }) => (visible = false) => {
   if (api.isValidValue([state.minDate, state.maxDate])) {
     emit("pick", [state.minDate, state.maxDate], visible);
+    const defaultFormat = props.type === "daterange" ? DATEPICKER.DateFormats.date : DATEPICKER.DateFormats.datetime;
+    const start = formatDate(state.minDate, props.format || defaultFormat, t);
+    const end = formatDate(state.maxDate, props.format || defaultFormat, t);
+    emit("update:modelValue", [start, end]);
+    emit("select-change", [start, end]);
   }
 };
-const isValidValue = ({ state }) => (value) => Array.isArray(value) && value && value[0] && value[1] && isDate(value[0]) && isDate(value[1]) && value[0].getTime() <= value[1].getTime() && (typeof state.disabledDate === "function" ? !state.disabledDate(value[0]) && !state.disabledDate(value[1]) : true);
+const isValidValue = ({ state }) => (value) => Array.isArray(value) && value && value[0] && value[1] && toDate1(value[0]) && toDate1(value[1]) && value[0].getTime() <= value[1].getTime() && (typeof state.disabledDate === "function" ? !state.disabledDate(value[0]) && !state.disabledDate(value[1]) : true);
 const resetView = ({ state }) => () => {
-  state.minDate = state.value && isDate(state.value[0]) ? new Date(state.value[0]) : null;
-  state.maxDate = state.value && isDate(state.value[0]) ? new Date(state.value[1]) : null;
+  state.minDate = state.value && toDate1(state.value[0]) ? new Date(state.value[0]) : null;
+  state.maxDate = state.value && toDate1(state.value[0]) ? new Date(state.value[1]) : null;
 };
 const setTimeFormat = ({ nextTick, vm, state }) => () => {
   nextTick(() => {
@@ -398,6 +418,19 @@ const watchPickerVisible = ({ state, constants }) => (val) => {
     state.maxRangeDate = constants.endDate;
   }
 };
+const watchModelValue = ({ state }) => (val) => {
+  const newVal = toDate1(val == null ? void 0 : val[0]);
+  const newVal1 = toDate1(val == null ? void 0 : val[1]);
+  if (newVal && newVal1) {
+    const start = modifyDate(newVal, newVal.getFullYear(), newVal.getMonth(), newVal.getUTCDate());
+    const end = modifyDate(newVal1, newVal1.getFullYear(), newVal1.getMonth(), newVal1.getUTCDate());
+    state.value = [start, end];
+    state.minDate = start;
+    state.maxDate = end;
+    state.leftDate = start;
+    state.rightDate = end;
+  }
+};
 export {
   calcDefaultValue,
   computerBtnDisabled,
@@ -438,6 +471,7 @@ export {
   watchMaxTimePickerVisible,
   watchMinDate,
   watchMinTimePickerVisible,
+  watchModelValue,
   watchPickerVisible,
   watchValue
 };