@sdata/web-vue 2.2.1 → 2.3.1

package/es/date-picker/picker.vue_vue_type_script_setup_true_lang.js

@@ -9,7 +9,7 @@ import useState from "../_hooks/use-state.js";
 import useMergeState from "../_hooks/use-merge-state.js";
 import Trigger from "../trigger/index.js";
 import { useI18n } from "../locale/index.js";
-import { dayjs, getDateValue, getNow, initializeDateLocale, isValueChange } from "../_utils/date.js";
+import { getDateValue, getDayjsValue, getNow, initializeDateLocale, isValueChange, toLocal } from "../_utils/date.js";
 import input_default from "../_components/picker/input.js";
 import { useConfigProviderProp } from "../_hooks/use-config-provider-prop.js";
 import IconCalendar from "../icon/icon-calendar/index.js";
@@ -23,13 +23,16 @@ import useTimePickerValue from "./hooks/use-time-picker-value.js";
 import { useReturnValue } from "./hooks/use-value-format.js";
 import { mergeValueWithTime } from "./utils/index.js";
 import picker_panel_default from "./picker-panel.js";
-import { computed, createBlock, createSlots, createVNode, defineComponent, mergeProps, normalizeProps, onUnmounted, openBlock, reactive, ref, renderSlot, toRefs, unref, useSlots, watch, watchEffect, withCtx } from "vue";
+import { computed, createBlock, createSlots, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onUnmounted, openBlock, reactive, ref, renderSlot, resolveDynamicComponent, toRefs, unref, useSlots, watch, watchEffect, withCtx } from "vue";
 //#region components/date-picker/picker.vue?vue&type=script&setup=true&lang.ts
 /**
 * @displayName Common
 * @noBrackets
 */
-var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Picker" }), {}, {
+var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "Picker",
+	inheritAttrs: false
+}), {}, {
 	__name: "picker",
 	props: {
 		/**
@@ -118,11 +121,21 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		*/
 		unmountOnClose: { type: Boolean },
 		/**
+		* @zh 面板隐藏不在当前时间范围的灰色日期
+		* @en Hide gray dates that are not in the current time range in the panel
+		*/
+		hideNotInViewDates: { type: Boolean },
+		/**
 		* @zh 提示文案
 		* @en Prompt copy
 		*/
 		placeholder: { type: String },
 		/**
+		* @zh 原生输入框属性
+		* @en Native input attributes
+		*/
+		inputProps: { type: Object },
+		/**
 		* @zh 是否禁用
 		* @en Whether to disable
 		*/
@@ -173,6 +186,16 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		*/
 		valueFormat: { type: String },
 		/**
+		* @zh 设置时区偏移，如果需要 utc 时间则设置为 0。
+		* @en Set the timezone offset. Set to 0 for UTC time.
+		*/
+		utcOffset: { type: Number },
+		/**
+		* @zh 设置时区，如果设置了 `utcOffset`，则以 `utcOffset` 为准。
+		* @en Set timezone. If `utcOffset` is set, `utcOffset` takes precedence.
+		*/
+		timezone: { type: String },
+		/**
 		* @zh 是否要预览快捷选择的结果
 		* @en Whether to preview the result of the shortcut
 		* @version 2.28.0
@@ -242,6 +265,13 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		const props = __props;
 		const emit = __emit;
 		/**
+		* @zh 自定义渲染面板
+		* @en Customize panel rendering
+		* @slot panelRender
+		* @binding {Component} component
+		* @binding {object} props
+		*/
+		/**
 		* @zh 输入框前缀
 		* @en Input box prefix
 		* @slot prefix
@@ -284,7 +314,7 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		* @slot icon-next-double
 		*/
 		const slots = useSlots();
-		const { mode, modelValue, defaultValue, format, valueFormat, placeholder, popupVisible, defaultPopupVisible, disabled, showTime, timePickerProps, disabledDate, disabledTime, readonly, allowClear, locale, pickerValue, defaultPickerValue, dayStartOfWeek, shortcuts, shortcutsPosition, previewShortcut, showConfirmBtn, showNowBtn, abbreviation } = toRefs(props);
+		const { mode, modelValue, defaultValue, format, valueFormat, placeholder, popupVisible, defaultPopupVisible, disabled, showTime, timePickerProps, disabledDate, disabledTime, readonly, allowClear, locale, pickerValue, defaultPickerValue, dayStartOfWeek, shortcuts, shortcutsPosition, previewShortcut, showConfirmBtn, showNowBtn, abbreviation, utcOffset, timezone } = toRefs(props);
 		const { mergedValue: mergedDayStartOfWeek } = useConfigProviderProp(dayStartOfWeek, {
 			propNames: ["dayStartOfWeek", "day-start-of-week"],
 			getGlobalValue: (configProviderCtx) => {
@@ -361,7 +391,11 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			var _format$value;
 			return (_format$value = format.value) === null || _format$value === void 0 ? void 0 : _format$value.call(format, getDateValue(value));
 		} : computedFormat.value);
-		const getReturnValue = useReturnValue(reactive({ format: returnValueFormat }));
+		const getReturnValue = useReturnValue(reactive({
+			format: returnValueFormat,
+			utcOffset,
+			timezone
+		}));
 		const isDisabledDate = useIsDisabledDate(reactive({
 			mode,
 			disabledDate,
@@ -374,7 +408,9 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		const { value: selectedValue, setValue: setSelectedValue } = usePickerState(reactive({
 			modelValue,
 			defaultValue,
-			format: parseValueFormat
+			format: parseValueFormat,
+			utcOffset,
+			timezone
 		}));
 		const [processValue, setProcessValue] = useState();
 		const [previewValue, setPreviewValue] = useState();
@@ -401,10 +437,13 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			defaultValue: defaultPickerValue,
 			selectedValue: panelValue,
 			format: parseValueFormat,
+			utcOffset,
+			timezone,
 			onChange: (newVal) => {
 				const returnValue = getReturnValue(newVal);
-				const formattedValue = getFormattedValue(newVal, parseValueFormat.value);
-				emit("picker-value-change", returnValue, getDateValue(newVal), formattedValue);
+				const localValue = toLocal(newVal, utcOffset === null || utcOffset === void 0 ? void 0 : utcOffset.value, timezone === null || timezone === void 0 ? void 0 : timezone.value);
+				const formattedValue = getFormattedValue(localValue, parseValueFormat.value);
+				emit("picker-value-change", returnValue, getDateValue(localValue), formattedValue);
 				emit("update:pickerValue", returnValue);
 			}
 		}));
@@ -425,9 +464,10 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			if (!newVisible) setInputValue(void 0);
 		});
 		function emitChange(value, emitOk) {
+			const localValue = value ? toLocal(value, utcOffset === null || utcOffset === void 0 ? void 0 : utcOffset.value, timezone === null || timezone === void 0 ? void 0 : timezone.value) : void 0;
 			const returnValue = value ? getReturnValue(value) : void 0;
-			const formattedValue = getFormattedValue(value, parseValueFormat.value);
-			const dateValue = getDateValue(value);
+			const formattedValue = getFormattedValue(localValue, parseValueFormat.value);
+			const dateValue = getDateValue(localValue);
 			if (isValueChange(value, selectedValue.value)) {
 				var _eventHandlers$value, _eventHandlers$value$;
 				emit("update:modelValue", returnValue);
@@ -453,16 +493,14 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			headerMode.value = void 0;
 			if (emitSelect) {
 				const returnValue = value ? getReturnValue(value) : void 0;
-				const formattedValue = getFormattedValue(value, parseValueFormat.value);
-				emit("select", returnValue, getDateValue(value), formattedValue);
+				const localValue = value ? toLocal(value, utcOffset === null || utcOffset === void 0 ? void 0 : utcOffset.value, timezone === null || timezone === void 0 ? void 0 : timezone.value) : void 0;
+				const formattedValue = getFormattedValue(localValue, parseValueFormat.value);
+				emit("select", returnValue, getDateValue(localValue), formattedValue);
 			}
 		}
-		function focusInput(index) {
-			refInput.value && refInput.value.focus && refInput.value.focus(index);
-		}
 		function getMergedOpValue(date, time) {
 			if (!isDateTime.value && !(timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.value)) return date;
-			return mergeValueWithTime(getNow(), date, time);
+			return mergeValueWithTime(getNow(utcOffset === null || utcOffset === void 0 ? void 0 : utcOffset.value, timezone === null || timezone === void 0 ? void 0 : timezone.value), date, time);
 		}
 		function onPanelVisibleChange(visible) {
 			if (mergedDisabled.value) return;
@@ -482,7 +520,7 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			const targetValue = e.target.value;
 			setInputValue(targetValue);
 			if (!isValidInputValue(targetValue, computedFormat.value)) return;
-			const newValue = dayjs(targetValue, computedFormat.value);
+			const newValue = getDayjsValue(targetValue, computedFormat.value, utcOffset === null || utcOffset === void 0 ? void 0 : utcOffset.value, timezone === null || timezone === void 0 ? void 0 : timezone.value);
 			if (isDisabledDate(newValue)) return;
 			if (needConfirm.value) select(newValue);
 			else confirm(newValue, true);
@@ -503,9 +541,6 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		function onPanelConfirm() {
 			confirm(panelValue.value, false, true);
 		}
-		function onPanelClick() {
-			if (props.disabledInput) focusInput();
-		}
 		let clearPreviewTimer;
 		onUnmounted(() => {
 			clearTimeout(clearPreviewTimer);
@@ -545,16 +580,20 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		const computedTimePickerProps = computed(() => _objectSpread2(_objectSpread2({ format: computedFormat.value }, omit((timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.value) || {}, ["defaultValue"])), {}, { visible: panelVisible.value }));
 		const panelProps = computed(() => _objectSpread2(_objectSpread2({}, pick(props, [
 			"mode",
+			"shortcuts",
+			"shortcutsPosition",
+			"dayStartOfWeek",
 			"disabledDate",
 			"disabledTime",
 			"showTime",
-			"hideTrigger"
+			"hideTrigger",
+			"abbreviation",
+			"hideNotInViewDates",
+			"utcOffset",
+			"timezone"
 		])), {}, {
-			shortcuts: mergedShortcuts.value,
-			shortcutsPosition: mergedShortcutsPosition.value,
-			dayStartOfWeek: mergedDayStartOfWeek.value,
-			abbreviation: mergedAbbreviation.value,
 			showNowBtn: mergedShowNowBtn.value && mode.value === "date",
+			now: getNow(utcOffset === null || utcOffset === void 0 ? void 0 : utcOffset.value, timezone === null || timezone === void 0 ? void 0 : timezone.value),
 			prefixCls,
 			format: parseValueFormat.value,
 			value: panelValue.value,
@@ -562,8 +601,6 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			showConfirmBtn: needConfirm.value,
 			confirmBtnDisabled: confirmBtnDisabled.value,
 			timePickerProps: computedTimePickerProps.value,
-			extra: slots.extra,
-			dateRender: slots.cell,
 			headerValue: headerValue.value,
 			headerIcons: {
 				prev: slots["icon-prev"],
@@ -602,7 +639,18 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				"popup-container": __props.popupContainer,
 				onPopupVisibleChange: onPanelVisibleChange
 			}), {
-				content: withCtx(() => [createVNode(picker_panel_default, mergeProps(panelProps.value, { onClick: onPanelClick }), null, 16)]),
+				content: withCtx(() => [renderSlot(_ctx.$slots, "panelRender", {
+					component: picker_panel_default,
+					props: panelProps.value
+				}, () => [(openBlock(), createBlock(resolveDynamicComponent(picker_panel_default), normalizeProps(guardReactiveProps(panelProps.value)), createSlots({ _: 2 }, [_ctx.$slots.extra ? {
+					name: "extra",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "extra")]),
+					key: "0"
+				} : void 0, _ctx.$slots.cell ? {
+					name: "cell",
+					fn: withCtx((scope) => [renderSlot(_ctx.$slots, "cell", normalizeProps(guardReactiveProps(scope)))]),
+					key: "1"
+				} : void 0]), 1040))])]),
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(input_default, mergeProps(_ctx.$attrs, {
 					ref_key: "refInput",
 					ref: refInput,
@@ -614,6 +662,7 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 					readonly: !inputEditable.value || __props.disabledInput,
 					"allow-clear": unref(mergedAllowClear) && !unref(readonly),
 					placeholder: computedPlaceholder.value,
+					"input-props": __props.inputProps,
 					"input-value": unref(inputValue),
 					value: needConfirm.value ? panelValue.value : unref(selectedValue),
 					format: inputFormat.value,
@@ -637,6 +686,7 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 					"readonly",
 					"allow-clear",
 					"placeholder",
+					"input-props",
 					"input-value",
 					"value",
 					"format"
@@ -648,7 +698,19 @@ var picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				"popup-visible",
 				"unmount-on-close",
 				"popup-container"
-			])) : (openBlock(), createBlock(picker_panel_default, normalizeProps(mergeProps({ key: 1 }, _objectSpread2(_objectSpread2({}, _ctx.$attrs), panelProps.value))), null, 16));
+			])) : renderSlot(_ctx.$slots, "panelRender", {
+				key: 1,
+				component: picker_panel_default,
+				props: panelProps.value
+			}, () => [(openBlock(), createBlock(resolveDynamicComponent(picker_panel_default), normalizeProps(guardReactiveProps(_objectSpread2(_objectSpread2({}, panelProps.value), _ctx.$attrs))), createSlots({ _: 2 }, [_ctx.$slots.extra ? {
+				name: "extra",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "extra")]),
+				key: "0"
+			} : void 0, _ctx.$slots.cell ? {
+				name: "cell",
+				fn: withCtx((scope) => [renderSlot(_ctx.$slots, "cell", normalizeProps(guardReactiveProps(scope)))]),
+				key: "1"
+			} : void 0]), 1040))]);
 		};
 	}
 }));

package/es/date-picker/range-picker-panel.vue.d.ts

@@ -1,10 +1,59 @@
 import { PropType } from 'vue';
 import { Dayjs } from 'dayjs';
 import type { ShortcutType, RangePickerProps, Mode, RangeDisabledTime, RangeDisabledDate, WeekStart, StartHeaderProps } from './interface';
-import { RenderFunc } from '../_components/render-function';
-declare var __VLS_89: {};
+declare var __VLS_33: {
+    type: string;
+    date: Date;
+}, __VLS_42: {
+    type: string;
+    date: Date;
+}, __VLS_51: {
+    type: string;
+    date: Date;
+}, __VLS_60: {
+    type: string;
+    date: Date;
+}, __VLS_69: {
+    type: string;
+    date: Date;
+}, __VLS_78: {
+    type: string;
+    date: Date;
+}, __VLS_87: {
+    type: string;
+    date: Date;
+}, __VLS_96: {
+    type: string;
+    date: Date;
+}, __VLS_107: {
+    type: string;
+    date: Date;
+}, __VLS_118: {
+    type: string;
+    date: Date;
+}, __VLS_129: {};
 type __VLS_Slots = {} & {
-    extra?: (props: typeof __VLS_89) => any;
+    cell?: (props: typeof __VLS_33) => any;
+} & {
+    cell?: (props: typeof __VLS_42) => any;
+} & {
+    cell?: (props: typeof __VLS_51) => any;
+} & {
+    cell?: (props: typeof __VLS_60) => any;
+} & {
+    cell?: (props: typeof __VLS_69) => any;
+} & {
+    cell?: (props: typeof __VLS_78) => any;
+} & {
+    cell?: (props: typeof __VLS_87) => any;
+} & {
+    cell?: (props: typeof __VLS_96) => any;
+} & {
+    cell?: (props: typeof __VLS_107) => any;
+} & {
+    cell?: (props: typeof __VLS_118) => any;
+} & {
+    extra?: (props: typeof __VLS_129) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     mode: {
@@ -56,12 +105,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     timePickerProps: {
         type: PropType<RangePickerProps["timePickerProps"]>;
     };
-    extra: {
-        type: PropType<RenderFunc>;
-    };
-    dateRender: {
-        type: PropType<RenderFunc>;
-    };
     hideTrigger: {
         type: BooleanConstructor;
     };
@@ -92,6 +135,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     abbreviation: {
         type: BooleanConstructor;
     };
+    hideNotInViewDates: {
+        type: BooleanConstructor;
+    };
+    utcOffset: {
+        type: NumberConstructor;
+    };
+    timezone: {
+        type: StringConstructor;
+    };
+    now: {
+        type: PropType<Dayjs>;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     confirm: () => any;
     "cell-click": (_date: Dayjs) => any;
@@ -154,12 +209,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     timePickerProps: {
         type: PropType<RangePickerProps["timePickerProps"]>;
     };
-    extra: {
-        type: PropType<RenderFunc>;
-    };
-    dateRender: {
-        type: PropType<RenderFunc>;
-    };
     hideTrigger: {
         type: BooleanConstructor;
     };
@@ -190,6 +239,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     abbreviation: {
         type: BooleanConstructor;
     };
+    hideNotInViewDates: {
+        type: BooleanConstructor;
+    };
+    utcOffset: {
+        type: NumberConstructor;
+    };
+    timezone: {
+        type: StringConstructor;
+    };
+    now: {
+        type: PropType<Dayjs>;
+    };
 }>> & Readonly<{
     onConfirm?: (() => any) | undefined;
     "onCell-click"?: ((_date: Dayjs) => any) | undefined;
@@ -208,6 +269,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     disabled: boolean[];
     mode: Mode;
     showTime: boolean;
+    hideNotInViewDates: boolean;
     dayStartOfWeek: WeekStart;
     showConfirmBtn: boolean;
     confirmBtnDisabled: boolean;

package/es/date-picker/range-picker-panel.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,6 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { isArray, isFunction } from "../_utils/is.js";
 import { getDayjsValue } from "../_utils/date.js";
-import render_function_default from "../_components/render-function.js";
 import { normalizeRangeValue } from "./utils/index.js";
 import date_default from "./panels/date/index.js";
 import footer_default from "./panels/footer.js";
@@ -50,8 +49,6 @@ var range_picker_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		disabledDate: { type: Function },
 		disabledTime: { type: Function },
 		timePickerProps: { type: Object },
-		extra: { type: Function },
-		dateRender: { type: Function },
 		hideTrigger: { type: Boolean },
 		startHeaderProps: {
 			type: Object,
@@ -69,7 +66,11 @@ var range_picker_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		visible: { type: Boolean },
 		startHeaderMode: { type: String },
 		endHeaderMode: { type: String },
-		abbreviation: { type: Boolean }
+		abbreviation: { type: Boolean },
+		hideNotInViewDates: { type: Boolean },
+		utcOffset: { type: Number },
+		timezone: { type: String },
+		now: { type: Object }
 	},
 	emits: [
 		"cell-click",
@@ -87,7 +88,7 @@ var range_picker_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { prefixCls, shortcuts, shortcutsPosition, format, hideTrigger, value, disabledDate, disabledTime, startHeaderProps, endHeaderProps, extra, dateRender, visible, startHeaderMode, endHeaderMode } = toRefs(props);
+		const { prefixCls, shortcuts, shortcutsPosition, format, hideTrigger, value, disabledDate, disabledTime, startHeaderProps, endHeaderProps, visible, startHeaderMode, endHeaderMode, utcOffset, timezone } = toRefs(props);
 		const showShortcuts = computed(() => isArray(shortcuts.value) && shortcuts.value.length);
 		const classNames = computed(() => [`${prefixCls.value}-range-container`, {
 			[`${prefixCls.value}-range-container-panel-only`]: hideTrigger.value,
@@ -99,7 +100,7 @@ var range_picker_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 			if (newVal && !oldVal) currentDateView.value = "date";
 		});
 		function getShortcutValue(shortcut) {
-			return getDayjsValue(normalizeRangeValue(isFunction(shortcut.value) ? shortcut.value() : shortcut.value), shortcut.format || format.value);
+			return getDayjsValue(normalizeRangeValue(isFunction(shortcut.value) ? shortcut.value() : shortcut.value), shortcut.format || format.value, utcOffset === null || utcOffset === void 0 ? void 0 : utcOffset.value, timezone === null || timezone === void 0 ? void 0 : timezone.value);
 		}
 		function onShortcutClick(shortcut) {
 			emit("shortcut-click", getShortcutValue(shortcut), shortcut);
@@ -149,16 +150,6 @@ var range_picker_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 				return (_disabledTime$value = disabledTime === null || disabledTime === void 0 || (_disabledTime$value2 = disabledTime.value) === null || _disabledTime$value2 === void 0 ? void 0 : _disabledTime$value2.call(disabledTime, current, index === 0 ? "start" : "end")) !== null && _disabledTime$value !== void 0 ? _disabledTime$value : {};
 			} : void 0;
 		}
-		function getDateRenderFunc(index) {
-			return isFunction(dateRender === null || dateRender === void 0 ? void 0 : dateRender.value) ? (props) => {
-				const mergeProps = _objectSpread2(_objectSpread2({}, props), {}, { type: index === 0 ? "start" : "end" });
-				return dateRender.value(mergeProps);
-			} : void 0;
-		}
-		const resolvedExtra = (slotProps) => {
-			var _extra$value, _extra$value2;
-			return (_extra$value = extra === null || extra === void 0 || (_extra$value2 = extra.value) === null || _extra$value2 === void 0 ? void 0 : _extra$value2.call(extra, slotProps)) !== null && _extra$value !== void 0 ? _extra$value : "";
-		};
 		const shortcutsProps = reactive({
 			prefixCls,
 			shortcuts,
@@ -169,7 +160,6 @@ var range_picker_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		const startPanelProps = computed(() => _objectSpread2(_objectSpread2({}, startHeaderProps.value), {}, {
 			rangeValues: value.value,
 			disabledDate: getDisabledDateFunc(0),
-			dateRender: getDateRenderFunc(0),
 			onSelect: (startHeaderMode === null || startHeaderMode === void 0 ? void 0 : startHeaderMode.value) ? onStartHeaderPanelSelect : onPanelCellClick,
 			onCellMouseEnter: onPanelCellMouseEnter,
 			onHeaderLabelClick: onStartPanelHeaderLabelClick
@@ -177,7 +167,6 @@ var range_picker_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		const endPanelProps = computed(() => _objectSpread2(_objectSpread2({}, endHeaderProps.value), {}, {
 			rangeValues: value.value,
 			disabledDate: getDisabledDateFunc(1),
-			dateRender: getDateRenderFunc(1),
 			onSelect: (endHeaderMode === null || endHeaderMode === void 0 ? void 0 : endHeaderMode.value) ? onEndHeaderPanelSelect : onPanelCellClick,
 			onCellMouseEnter: onPanelCellMouseEnter,
 			onHeaderLabelClick: onEndPanelHeaderLabelClick
@@ -185,7 +174,31 @@ var range_picker_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(classNames.value) }, [
 				showShortcuts.value && unref(shortcutsPosition) === "left" ? (openBlock(), createBlock(shortcuts_default, normalizeProps(mergeProps({ key: 0 }, shortcutsProps)), null, 16)) : createCommentVNode("", true),
-				createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-range-panel-wrapper`) }, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-range`) }, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-range-wrapper`) }, [unref(startHeaderMode) || unref(endHeaderMode) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [unref(startHeaderMode) === "year" ? (openBlock(), createBlock(year_default, normalizeProps(mergeProps({ key: 0 }, startPanelProps.value)), null, 16)) : createCommentVNode("", true), unref(endHeaderMode) === "year" ? (openBlock(), createBlock(year_default, normalizeProps(mergeProps({ key: 1 }, endPanelProps.value)), null, 16)) : unref(startHeaderMode) === "month" ? (openBlock(), createBlock(month_default, mergeProps({ key: 2 }, startPanelProps.value, { abbreviation: __props.abbreviation }), null, 16, ["abbreviation"])) : unref(endHeaderMode) === "month" ? (openBlock(), createBlock(month_default, mergeProps({ key: 3 }, endPanelProps.value, { abbreviation: __props.abbreviation }), null, 16, ["abbreviation"])) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [__props.mode === "week" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(week_default, mergeProps(startPanelProps.value, { "day-start-of-week": __props.dayStartOfWeek }), null, 16, ["day-start-of-week"]), createVNode(week_default, mergeProps(endPanelProps.value, { "day-start-of-week": __props.dayStartOfWeek }), null, 16, ["day-start-of-week"])], 64)) : __props.mode === "month" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(month_default, mergeProps(startPanelProps.value, { abbreviation: __props.abbreviation }), null, 16, ["abbreviation"]), createVNode(month_default, mergeProps(endPanelProps.value, { abbreviation: __props.abbreviation }), null, 16, ["abbreviation"])], 64)) : __props.mode === "year" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createVNode(year_default, normalizeProps(guardReactiveProps(startPanelProps.value)), null, 16), createVNode(year_default, normalizeProps(guardReactiveProps(endPanelProps.value)), null, 16)], 64)) : __props.mode === "quarter" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createVNode(quarter_default, normalizeProps(guardReactiveProps(startPanelProps.value)), null, 16), createVNode(quarter_default, normalizeProps(guardReactiveProps(endPanelProps.value)), null, 16)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 4 }, [createVNode(date_default, mergeProps({
+				createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-range-panel-wrapper`) }, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-range`) }, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-range-wrapper`) }, [unref(startHeaderMode) || unref(endHeaderMode) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [unref(startHeaderMode) === "year" ? (openBlock(), createBlock(year_default, normalizeProps(mergeProps({ key: 0 }, startPanelProps.value)), null, 16)) : createCommentVNode("", true), unref(endHeaderMode) === "year" ? (openBlock(), createBlock(year_default, normalizeProps(mergeProps({ key: 1 }, endPanelProps.value)), null, 16)) : unref(startHeaderMode) === "month" ? (openBlock(), createBlock(month_default, mergeProps({ key: 2 }, startPanelProps.value, { abbreviation: __props.abbreviation }), null, 16, ["abbreviation"])) : unref(endHeaderMode) === "month" ? (openBlock(), createBlock(month_default, mergeProps({ key: 3 }, endPanelProps.value, { abbreviation: __props.abbreviation }), null, 16, ["abbreviation"])) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [__props.mode === "week" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(week_default, mergeProps(startPanelProps.value, { "day-start-of-week": __props.dayStartOfWeek }), {
+					cell: withCtx((scope) => [renderSlot(_ctx.$slots, "cell", normalizeProps(guardReactiveProps(_objectSpread2(_objectSpread2({}, scope), {}, { type: "start" }))))]),
+					_: 3
+				}, 16, ["day-start-of-week"]), createVNode(week_default, mergeProps(endPanelProps.value, { "day-start-of-week": __props.dayStartOfWeek }), {
+					cell: withCtx((scope) => [renderSlot(_ctx.$slots, "cell", normalizeProps(guardReactiveProps(_objectSpread2(_objectSpread2({}, scope), {}, { type: "end" }))))]),
+					_: 3
+				}, 16, ["day-start-of-week"])], 64)) : __props.mode === "month" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(month_default, mergeProps(startPanelProps.value, { abbreviation: __props.abbreviation }), {
+					cell: withCtx((scope) => [renderSlot(_ctx.$slots, "cell", normalizeProps(guardReactiveProps(_objectSpread2(_objectSpread2({}, scope), {}, { type: "start" }))))]),
+					_: 3
+				}, 16, ["abbreviation"]), createVNode(month_default, mergeProps(endPanelProps.value, { abbreviation: __props.abbreviation }), {
+					cell: withCtx((scope) => [renderSlot(_ctx.$slots, "cell", normalizeProps(guardReactiveProps(_objectSpread2(_objectSpread2({}, scope), {}, { type: "end" }))))]),
+					_: 3
+				}, 16, ["abbreviation"])], 64)) : __props.mode === "year" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createVNode(year_default, normalizeProps(guardReactiveProps(startPanelProps.value)), {
+					cell: withCtx((scope) => [renderSlot(_ctx.$slots, "cell", normalizeProps(guardReactiveProps(_objectSpread2(_objectSpread2({}, scope), {}, { type: "start" }))))]),
+					_: 3
+				}, 16), createVNode(year_default, normalizeProps(guardReactiveProps(endPanelProps.value)), {
+					cell: withCtx((scope) => [renderSlot(_ctx.$slots, "cell", normalizeProps(guardReactiveProps(_objectSpread2(_objectSpread2({}, scope), {}, { type: "end" }))))]),
+					_: 3
+				}, 16)], 64)) : __props.mode === "quarter" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createVNode(quarter_default, normalizeProps(guardReactiveProps(startPanelProps.value)), {
+					cell: withCtx((scope) => [renderSlot(_ctx.$slots, "cell", normalizeProps(guardReactiveProps(_objectSpread2(_objectSpread2({}, scope), {}, { type: "start" }))))]),
+					_: 3
+				}, 16), createVNode(quarter_default, normalizeProps(guardReactiveProps(endPanelProps.value)), {
+					cell: withCtx((scope) => [renderSlot(_ctx.$slots, "cell", normalizeProps(guardReactiveProps(_objectSpread2(_objectSpread2({}, scope), {}, { type: "end" }))))]),
+					_: 3
+				}, 16)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 4 }, [createVNode(date_default, mergeProps({
 					currentView: currentDateView.value,
 					"onUpdate:currentView": _cache[0] || (_cache[0] = ($event) => currentDateView.value = $event)
 				}, startPanelProps.value, {
@@ -194,21 +207,28 @@ var range_picker_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 					"footer-value": __props.footerValue && __props.footerValue[0],
 					"time-picker-value": __props.timePickerValue && __props.timePickerValue[0],
 					"day-start-of-week": __props.dayStartOfWeek,
+					"hide-not-in-view-dates": __props.hideNotInViewDates,
 					"show-time": __props.showTime,
 					"time-picker-props": __props.timePickerProps,
 					"disabled-time": getDisabledTimeFunc(0),
 					disabled: __props.disabled[0],
+					now: __props.now,
 					onTimePickerSelect: onStartTimePickerSelect
-				}), null, 16, [
+				}), {
+					cell: withCtx((scope) => [renderSlot(_ctx.$slots, "cell", normalizeProps(guardReactiveProps(_objectSpread2(_objectSpread2({}, scope), {}, { type: "start" }))))]),
+					_: 3
+				}, 16, [
 					"currentView",
 					"value",
 					"footer-value",
 					"time-picker-value",
 					"day-start-of-week",
+					"hide-not-in-view-dates",
 					"show-time",
 					"time-picker-props",
 					"disabled-time",
-					"disabled"
+					"disabled",
+					"now"
 				]), createVNode(date_default, mergeProps({
 					currentView: currentDateView.value,
 					"onUpdate:currentView": _cache[1] || (_cache[1] = ($event) => currentDateView.value = $event)
@@ -218,33 +238,37 @@ var range_picker_panel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 					"footer-value": __props.footerValue && __props.footerValue[1],
 					"time-picker-value": __props.timePickerValue && __props.timePickerValue[1],
 					"day-start-of-week": __props.dayStartOfWeek,
+					"hide-not-in-view-dates": __props.hideNotInViewDates,
 					"show-time": __props.showTime,
 					"time-picker-props": __props.timePickerProps,
 					"disabled-time": getDisabledTimeFunc(1),
 					disabled: __props.disabled[1],
+					now: __props.now,
 					onTimePickerSelect: onEndTimePickerSelect
-				}), null, 16, [
+				}), {
+					cell: withCtx((scope) => [renderSlot(_ctx.$slots, "cell", normalizeProps(guardReactiveProps(_objectSpread2(_objectSpread2({}, scope), {}, { type: "end" }))))]),
+					_: 3
+				}, 16, [
 					"currentView",
 					"value",
 					"footer-value",
 					"time-picker-value",
 					"day-start-of-week",
+					"hide-not-in-view-dates",
 					"show-time",
 					"time-picker-props",
 					"disabled-time",
-					"disabled"
+					"disabled",
+					"now"
 				])], 64))], 64))], 2)], 2), createVNode(footer_default, {
 					"prefix-cls": unref(prefixCls),
 					"show-today-btn": false,
 					"show-confirm-btn": __props.showConfirmBtn,
 					"confirm-btn-disabled": __props.confirmBtnDisabled,
 					onConfirmBtnClick
-				}, createSlots({ _: 2 }, [unref(extra) || _ctx.$slots.extra ? {
+				}, createSlots({ _: 2 }, [_ctx.$slots.extra ? {
 					name: "extra",
-					fn: withCtx(() => [_ctx.$slots.extra ? renderSlot(_ctx.$slots, "extra", { key: 0 }) : (openBlock(), createBlock(unref(render_function_default), {
-						key: 1,
-						"render-func": resolvedExtra
-					}))]),
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "extra")]),
 					key: "0"
 				} : void 0, showShortcuts.value && unref(shortcutsPosition) === "bottom" ? {
 					name: "btn",