vxe-pc-ui 4.20.25 → 4.20.26

package/es/date-range-picker/src/date-range-picker.js

@@ -1,7 +1,7 @@
 import { h, Teleport, ref, computed, provide, reactive, inject, nextTick, watch, onDeactivated, onUnmounted, onBeforeUnmount } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
 import XEUtils from "xe-utils";
-import { getConfig, getIcon, getI18n, commands, globalEvents, createEvent, GLOBAL_EVENT_KEYS, useSize, renderEmptyElement } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from "../../ui/src/utils";
 import { updatePanelPlacement, getEventTargetNode, getPopupContainer, toCssUnit } from "../../ui/src/dom";
 import { parseDateString, parseDateObj, getRangeDateByCode, handleValueFormat, hasTimestampValueType, hasDateValueType, parseDateValue, getNextMonth, getPrevMonth, getNextYear, getPrevYear } from "../../date-panel/src/util";
@@ -10,6 +10,7 @@ import { createComponentLog } from "../../ui/src/log";
 import VxeDatePanelComponent from "../../date-panel";
 import VxeButtonComponent from "../../button";
 import VxeButtonGroupComponent from "../../button-group";
+const { getConfig, getIcon, getI18n, commands, globalEvents, createEvent, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI;
 const { errLog } = createComponentLog("date-range-picker");
 function createReactData() {
   return {
@@ -146,26 +147,7 @@ var date_range_picker_default = defineVxeComponent({
     popupConfig: Object,
     shortcutConfig: Object
   },
-  emits: [
-    "update:modelValue",
-    "update:startValue",
-    "update:endValue",
-    "input",
-    "change",
-    "keydown",
-    "keyup",
-    "click",
-    "focus",
-    "blur",
-    "clear",
-    "confirm",
-    "prefix-click",
-    "suffix-click",
-    "date-prev",
-    "date-today",
-    "date-next",
-    "shortcut-click"
-  ],
+  emits: ["update:modelValue", "update:startValue", "update:endValue", "input", "change", "keydown", "keyup", "click", "focus", "blur", "clear", "confirm", "prefix-click", "suffix-click", "date-prev", "date-today", "date-next", "shortcut-click"],
   setup(props, context) {
     const { slots, emit } = context;
     const $xeModal = inject("$xeModal", null);
@@ -175,7 +157,7 @@ var date_range_picker_default = defineVxeComponent({
     const $xeForm = inject("$xeForm", null);
     const formItemInfo = inject("xeFormItemInfo", null);
     const xID = XEUtils.uniqueId();
-    const { computeSize } = useSize(props);
+    const { computeSize } = useFns.useSize(props);
     const reactData = reactive(createReactData());
     const internalData = createInternalData();
     const defaultFuncProps = {
@@ -320,9 +302,12 @@ var date_range_picker_default = defineVxeComponent({
       const { options } = shortcutOpts;
       if (options) {
         return options.map((option, index) => {
-          return Object.assign({
-            name: `${option.name || option.code || index}`
-          }, option);
+          return Object.assign(
+            {
+              name: `${option.name || option.code || index}`
+            },
+            option
+          );
         });
       }
       return [];
@@ -1120,17 +1105,21 @@ var date_range_picker_default = defineVxeComponent({
       const { position, align, mode } = shortcutOpts;
       const shortcutList = computeShortcutList.value;
       if (isEnableConf(shortcutOpts) && shortcutList.length && (position || "left") === pos) {
-        return h("div", {
-          class: `vxe-date-range-picker--layout-${pos}-wrapper`
-        }, [
-          h(VxeButtonGroupComponent, {
-            options: shortcutList,
-            mode,
-            align,
-            vertical: isVertical,
-            onClick: handleShortcutEvent
-          })
-        ]);
+        return h(
+          "div",
+          {
+            class: `vxe-date-range-picker--layout-${pos}-wrapper`
+          },
+          [
+            h(VxeButtonGroupComponent, {
+              options: shortcutList,
+              mode,
+              align,
+              vertical: isVertical,
+              onClick: handleShortcutEvent
+            })
+          ]
+        );
       }
       return renderEmptyElement($xeDateRangePicker);
     };
@@ -1167,161 +1156,234 @@ var date_range_picker_default = defineVxeComponent({
       const hasShortcutBtn = shortcutList.length > 0;
       const showConfirmBtn = showConfirmButton === null ? isTimeOrDateTimeType || !autoClose : showConfirmButton;
       const showClearBtn = showClearButton === null ? isClearable : showClearButton;
-      return h(Teleport, {
-        to: getPopupContainer(appendTo),
-        disabled: btnTransfer ? !initialized : true
-      }, [
-        h("div", {
-          ref: refInputPanel,
-          class: ["vxe-table--ignore-clear vxe-date-range-picker--panel", `type--${type}`, ppClassName ? XEUtils.isFunction(ppClassName) ? ppClassName({ $dateRangePicker: $xeDateRangePicker }) : ppClassName : "", {
-            [`size--${vSize}`]: vSize,
-            "is--transfer": btnTransfer,
-            "ani--leave": isAniVisible,
-            "ani--enter": visiblePanel,
-            "show--top": !!(topSlot || headerSlot || hasShortcutBtn && (position === "top" || position === "header")),
-            "show--bottom": !!(bottomSlot || footerSlot || hasShortcutBtn && (position === "bottom" || position === "footer")),
-            "show--left": !!(leftSlot || hasShortcutBtn && position === "left"),
-            "show--right": !!(rightSlot || hasShortcutBtn && position === "right")
-          }],
-          placement: panelPlacement,
-          style: panelStyle
-        }, initialized && (visiblePanel || isAniVisible) ? [
-          h("div", {
-            ref: refPanelWrapper,
-            class: ["vxe-date-range-picker--layout-all-wrapper", `type--${type}`, {
-              [`size--${vSize}`]: vSize
-            }]
-          }, [
-            topSlot ? h("div", {
-              class: "vxe-date-range-picker--layout-top-wrapper"
-            }, topSlot({})) : renderShortcutBtn("top"),
-            h("div", {
-              class: "vxe-date-range-picker--layout-body-layout-wrapper"
-            }, [
-              leftSlot ? h("div", {
-                class: "vxe-date-range-picker--layout-left-wrapper"
-              }, leftSlot({})) : renderShortcutBtn("left", true),
-              h("div", {
-                class: "vxe-date-range-picker--layout-body-content-wrapper"
-              }, [
-                headerSlot ? h("div", {
-                  class: "vxe-date-range-picker--layout-header-wrapper"
-                }, headerSlot({})) : renderShortcutBtn("header"),
-                h("div", {
-                  class: "vxe-date-range-picker--layout-body-wrapper"
-                }, [
-                  h(VxeDatePanelComponent, {
-                    ref: refStartDatePanel,
-                    modelValue: paneStartVal,
-                    multiple: !isTimeType,
-                    valueSort: true,
-                    limitCount: 3,
-                    defaultMode: "first",
-                    type: props.type,
-                    className: props.className,
-                    minDate: props.minDate,
-                    maxDate: props.maxDate,
-                    startDay: props.startDay,
-                    labelFormat: props.labelFormat,
-                    valueFormat: valueFormat === "date" || valueFormat === "timestamp" ? "" : valueFormat,
-                    timeFormat: props.timeFormat,
-                    defaultDate: sdDate,
-                    defaultTime: sdTime,
-                    timeConfig: timeOpts,
-                    festivalMethod: props.festivalMethod || defaultFuncProps.festivalMethod,
-                    disabledMethod: props.disabledMethod || defaultFuncProps.disabledMethod,
-                    selectDay: props.selectDay,
-                    cellClassName: panelCellClassName,
-                    onChange: startPanelChangeEvent,
-                    onDatePrev: startPanelDateBtnChangeEvent,
-                    onDateToday: startPanelDateBtnChangeEvent,
-                    onDateNext: startPanelDateBtnChangeEvent
-                  }),
-                  h(VxeDatePanelComponent, {
-                    ref: refEndDatePanel,
-                    modelValue: paneEndVal,
-                    multiple: !isTimeType,
-                    valueSort: true,
-                    limitCount: 3,
-                    defaultMode: "last",
-                    type: props.type,
-                    className: props.className,
-                    minDate: props.minDate,
-                    maxDate: props.maxDate,
-                    startDay: props.startDay,
-                    labelFormat: props.labelFormat,
-                    valueFormat: valueFormat === "date" || valueFormat === "timestamp" ? "" : valueFormat,
-                    timeFormat: props.timeFormat,
-                    defaultDate: edDate,
-                    defaultTime: edTime,
-                    timeConfig: timeOpts,
-                    festivalMethod: props.festivalMethod || defaultFuncProps.festivalMethod,
-                    disabledMethod: props.disabledMethod || defaultFuncProps.disabledMethod,
-                    selectDay: props.selectDay,
-                    cellClassName: panelCellClassName,
-                    onChange: endPanelChangeEvent,
-                    onDatePrev: endPanelDateBtnChangeEvent,
-                    onDateToday: endPanelDateBtnChangeEvent,
-                    onDateNext: endPanelDateBtnChangeEvent
-                  })
-                ]),
-                h("div", {
-                  class: "vxe-date-range-picker--layout-footer-wrapper"
-                }, [
-                  h("div", {
-                    class: "vxe-date-range-picker--layout-footer-label"
-                  }, startLabel || endLabel ? [
-                    h("span", startLabel),
-                    h("span", `${separator || ""}`),
-                    h("span", endLabel)
-                  ] : `${separator || ""}`),
-                  h("div", {
-                    class: "vxe-date-range-picker--layout-footer-custom"
-                  }, footerSlot ? footerSlot({}) : [renderShortcutBtn("footer")]),
-                  h("div", {
-                    class: "vxe-date-range-picker--layout-footer-btns"
-                  }, [
-                    showClearBtn ? h(VxeButtonComponent, {
-                      size: "mini",
-                      disabled: !(selectStValue || selectEdValue),
-                      content: getI18n("vxe.button.clear"),
-                      onClick: clearValueEvent
-                    }) : renderEmptyElement($xeDateRangePicker),
-                    showConfirmBtn ? h(VxeButtonComponent, {
-                      size: "mini",
-                      status: "primary",
-                      content: getI18n("vxe.button.confirm"),
-                      onClick: confirmEvent
-                    }) : renderEmptyElement($xeDateRangePicker)
-                  ])
-                ])
-              ]),
-              rightSlot ? h("div", {
-                class: "vxe-date-range-picker--layout-right-wrapper"
-              }, rightSlot({})) : renderShortcutBtn("right", true)
-            ]),
-            bottomSlot ? h("div", {
-              class: "vxe-date-range-picker--layout-bottom-wrapper"
-            }, bottomSlot({})) : renderShortcutBtn("bottom")
-          ])
-        ] : [])
-      ]);
+      return h(
+        Teleport,
+        {
+          to: getPopupContainer(appendTo),
+          disabled: btnTransfer ? !initialized : true
+        },
+        [
+          h(
+            "div",
+            {
+              ref: refInputPanel,
+              class: [
+                "vxe-table--ignore-clear vxe-date-range-picker--panel",
+                `type--${type}`,
+                ppClassName ? XEUtils.isFunction(ppClassName) ? ppClassName({ $dateRangePicker: $xeDateRangePicker }) : ppClassName : "",
+                {
+                  [`size--${vSize}`]: vSize,
+                  "is--transfer": btnTransfer,
+                  "ani--leave": isAniVisible,
+                  "ani--enter": visiblePanel,
+                  "show--top": !!(topSlot || headerSlot || hasShortcutBtn && (position === "top" || position === "header")),
+                  "show--bottom": !!(bottomSlot || footerSlot || hasShortcutBtn && (position === "bottom" || position === "footer")),
+                  "show--left": !!(leftSlot || hasShortcutBtn && position === "left"),
+                  "show--right": !!(rightSlot || hasShortcutBtn && position === "right")
+                }
+              ],
+              placement: panelPlacement,
+              style: panelStyle
+            },
+            initialized && (visiblePanel || isAniVisible) ? [
+              h(
+                "div",
+                {
+                  ref: refPanelWrapper,
+                  class: [
+                    "vxe-date-range-picker--layout-all-wrapper",
+                    `type--${type}`,
+                    {
+                      [`size--${vSize}`]: vSize
+                    }
+                  ]
+                },
+                [
+                  topSlot ? h(
+                    "div",
+                    {
+                      class: "vxe-date-range-picker--layout-top-wrapper"
+                    },
+                    topSlot({})
+                  ) : renderShortcutBtn("top"),
+                  h(
+                    "div",
+                    {
+                      class: "vxe-date-range-picker--layout-body-layout-wrapper"
+                    },
+                    [
+                      leftSlot ? h(
+                        "div",
+                        {
+                          class: "vxe-date-range-picker--layout-left-wrapper"
+                        },
+                        leftSlot({})
+                      ) : renderShortcutBtn("left", true),
+                      h(
+                        "div",
+                        {
+                          class: "vxe-date-range-picker--layout-body-content-wrapper"
+                        },
+                        [
+                          headerSlot ? h(
+                            "div",
+                            {
+                              class: "vxe-date-range-picker--layout-header-wrapper"
+                            },
+                            headerSlot({})
+                          ) : renderShortcutBtn("header"),
+                          h(
+                            "div",
+                            {
+                              class: "vxe-date-range-picker--layout-body-wrapper"
+                            },
+                            [
+                              h(VxeDatePanelComponent, {
+                                ref: refStartDatePanel,
+                                modelValue: paneStartVal,
+                                multiple: !isTimeType,
+                                valueSort: true,
+                                limitCount: 3,
+                                defaultMode: "first",
+                                type: props.type,
+                                className: props.className,
+                                minDate: props.minDate,
+                                maxDate: props.maxDate,
+                                startDay: props.startDay,
+                                labelFormat: props.labelFormat,
+                                valueFormat: valueFormat === "date" || valueFormat === "timestamp" ? "" : valueFormat,
+                                timeFormat: props.timeFormat,
+                                defaultDate: sdDate,
+                                defaultTime: sdTime,
+                                timeConfig: timeOpts,
+                                festivalMethod: props.festivalMethod || defaultFuncProps.festivalMethod,
+                                disabledMethod: props.disabledMethod || defaultFuncProps.disabledMethod,
+                                selectDay: props.selectDay,
+                                cellClassName: panelCellClassName,
+                                onChange: startPanelChangeEvent,
+                                onDatePrev: startPanelDateBtnChangeEvent,
+                                onDateToday: startPanelDateBtnChangeEvent,
+                                onDateNext: startPanelDateBtnChangeEvent
+                              }),
+                              h(VxeDatePanelComponent, {
+                                ref: refEndDatePanel,
+                                modelValue: paneEndVal,
+                                multiple: !isTimeType,
+                                valueSort: true,
+                                limitCount: 3,
+                                defaultMode: "last",
+                                type: props.type,
+                                className: props.className,
+                                minDate: props.minDate,
+                                maxDate: props.maxDate,
+                                startDay: props.startDay,
+                                labelFormat: props.labelFormat,
+                                valueFormat: valueFormat === "date" || valueFormat === "timestamp" ? "" : valueFormat,
+                                timeFormat: props.timeFormat,
+                                defaultDate: edDate,
+                                defaultTime: edTime,
+                                timeConfig: timeOpts,
+                                festivalMethod: props.festivalMethod || defaultFuncProps.festivalMethod,
+                                disabledMethod: props.disabledMethod || defaultFuncProps.disabledMethod,
+                                selectDay: props.selectDay,
+                                cellClassName: panelCellClassName,
+                                onChange: endPanelChangeEvent,
+                                onDatePrev: endPanelDateBtnChangeEvent,
+                                onDateToday: endPanelDateBtnChangeEvent,
+                                onDateNext: endPanelDateBtnChangeEvent
+                              })
+                            ]
+                          ),
+                          h(
+                            "div",
+                            {
+                              class: "vxe-date-range-picker--layout-footer-wrapper"
+                            },
+                            [
+                              h(
+                                "div",
+                                {
+                                  class: "vxe-date-range-picker--layout-footer-label"
+                                },
+                                startLabel || endLabel ? [h("span", startLabel), h("span", `${separator || ""}`), h("span", endLabel)] : `${separator || ""}`
+                              ),
+                              h(
+                                "div",
+                                {
+                                  class: "vxe-date-range-picker--layout-footer-custom"
+                                },
+                                footerSlot ? footerSlot({}) : [renderShortcutBtn("footer")]
+                              ),
+                              h(
+                                "div",
+                                {
+                                  class: "vxe-date-range-picker--layout-footer-btns"
+                                },
+                                [
+                                  showClearBtn ? h(VxeButtonComponent, {
+                                    size: "mini",
+                                    disabled: !(selectStValue || selectEdValue),
+                                    content: getI18n("vxe.button.clear"),
+                                    onClick: clearValueEvent
+                                  }) : renderEmptyElement($xeDateRangePicker),
+                                  showConfirmBtn ? h(VxeButtonComponent, {
+                                    size: "mini",
+                                    status: "primary",
+                                    content: getI18n("vxe.button.confirm"),
+                                    onClick: confirmEvent
+                                  }) : renderEmptyElement($xeDateRangePicker)
+                                ]
+                              )
+                            ]
+                          )
+                        ]
+                      ),
+                      rightSlot ? h(
+                        "div",
+                        {
+                          class: "vxe-date-range-picker--layout-right-wrapper"
+                        },
+                        rightSlot({})
+                      ) : renderShortcutBtn("right", true)
+                    ]
+                  ),
+                  bottomSlot ? h(
+                    "div",
+                    {
+                      class: "vxe-date-range-picker--layout-bottom-wrapper"
+                    },
+                    bottomSlot({})
+                  ) : renderShortcutBtn("bottom")
+                ]
+              )
+            ] : []
+          )
+        ]
+      );
     };
     const renderPrefixIcon = () => {
       const { prefixIcon } = props;
       const prefixSlot = slots.prefix;
-      return prefixSlot || prefixIcon ? h("div", {
-        class: "vxe-date-range-picker--prefix",
-        onClick: clickPrefixEvent
-      }, [
-        h("div", {
-          class: "vxe-date-range-picker--prefix-icon"
-        }, prefixSlot ? getSlotVNs(prefixSlot({})) : [
-          h("i", {
-            class: prefixIcon
-          })
-        ])
-      ]) : null;
+      return prefixSlot || prefixIcon ? h(
+        "div",
+        {
+          class: "vxe-date-range-picker--prefix",
+          onClick: clickPrefixEvent
+        },
+        [
+          h(
+            "div",
+            {
+              class: "vxe-date-range-picker--prefix-icon"
+            },
+            prefixSlot ? getSlotVNs(prefixSlot({})) : [
+              h("i", {
+                class: prefixIcon
+              })
+            ]
+          )
+        ]
+      ) : null;
     };
     const renderSuffixIcon = () => {
       const { suffixIcon } = props;
@@ -1329,39 +1391,58 @@ var date_range_picker_default = defineVxeComponent({
       const suffixSlot = slots.suffix;
       const isDisabled = computeIsDisabled.value;
       const isClearable = computeIsClearable.value;
-      return h("div", {
-        class: ["vxe-date-range-picker--suffix", {
-          "is--clear": isClearable && !isDisabled && (selectStValue || selectEdValue)
-        }]
-      }, [
-        isClearable ? h("div", {
-          class: "vxe-date-range-picker--clear-icon",
-          onClick: clearValueEvent
-        }, [
-          h("i", {
-            class: getIcon().INPUT_CLEAR
-          })
-        ]) : renderEmptyElement($xeDateRangePicker),
-        renderExtraSuffixIcon(),
-        suffixSlot || suffixIcon ? h("div", {
-          class: "vxe-date-range-picker--suffix-icon",
-          onClick: clickSuffixEvent
-        }, suffixSlot ? getSlotVNs(suffixSlot({})) : [
-          h("i", {
-            class: suffixIcon
-          })
-        ]) : renderEmptyElement($xeDateRangePicker)
-      ]);
+      return h(
+        "div",
+        {
+          class: [
+            "vxe-date-range-picker--suffix",
+            {
+              "is--clear": isClearable && !isDisabled && (selectStValue || selectEdValue)
+            }
+          ]
+        },
+        [
+          isClearable ? h(
+            "div",
+            {
+              class: "vxe-date-range-picker--clear-icon",
+              onClick: clearValueEvent
+            },
+            [
+              h("i", {
+                class: getIcon().INPUT_CLEAR
+              })
+            ]
+          ) : renderEmptyElement($xeDateRangePicker),
+          renderExtraSuffixIcon(),
+          suffixSlot || suffixIcon ? h(
+            "div",
+            {
+              class: "vxe-date-range-picker--suffix-icon",
+              onClick: clickSuffixEvent
+            },
+            suffixSlot ? getSlotVNs(suffixSlot({})) : [
+              h("i", {
+                class: suffixIcon
+              })
+            ]
+          ) : renderEmptyElement($xeDateRangePicker)
+        ]
+      );
     };
     const renderExtraSuffixIcon = () => {
-      return h("div", {
-        class: "vxe-date-range-picker--control-icon",
-        onClick: clickIconEvent
-      }, [
-        h("i", {
-          class: ["vxe-date-range-picker--date-picker-icon", getIcon().DATE_PICKER_DATE]
-        })
-      ]);
+      return h(
+        "div",
+        {
+          class: "vxe-date-range-picker--control-icon",
+          onClick: clickIconEvent
+        },
+        [
+          h("i", {
+            class: ["vxe-date-range-picker--date-picker-icon", getIcon().DATE_PICKER_DATE]
+          })
+        ]
+      );
     };
     const renderVN = () => {
       const { className, inputClassName, type, name, autoComplete } = props;
@@ -1371,60 +1452,80 @@ var date_range_picker_default = defineVxeComponent({
       const formReadonly = computeFormReadonly.value;
       const inputLabel = computeInputLabel.value;
       if (formReadonly) {
-        return h("div", {
-          ref: refElem,
-          class: ["vxe-date-range-picker--readonly", `type--${type}`, className]
-        }, inputLabel);
+        return h(
+          "div",
+          {
+            ref: refElem,
+            class: ["vxe-date-range-picker--readonly", `type--${type}`, className]
+          },
+          inputLabel
+        );
       }
       const currStyle = computeCurrStyle.value;
       const inpPlaceholder = computeInpPlaceholder.value;
       const isClearable = computeIsClearable.value;
       const prefix = renderPrefixIcon();
       const suffix = renderSuffixIcon();
-      return h("div", {
-        ref: refElem,
-        class: ["vxe-date-range-picker", `type--${type}`, className, {
-          [`size--${vSize}`]: vSize,
-          "is--prefix": !!prefix,
-          "is--suffix": !!suffix,
-          "is--visible": visiblePanel,
-          "is--disabled": isDisabled,
-          "is--active": isActivated,
-          "show--clear": isClearable && !isDisabled && (selectStValue || selectEdValue)
-        }],
-        style: currStyle,
-        spellcheck: false
-      }, [
-        prefix || renderEmptyElement($xeDateRangePicker),
-        h("div", {
-          class: "vxe-date-range-picker--wrapper"
-        }, [
-          h("input", {
-            ref: refInputTarget,
-            class: "vxe-date-range-picker--inner" + (inputClassName ? " " + inputClassName : ""),
-            value: inputLabel,
-            name,
-            type: "text",
-            placeholder: inpPlaceholder,
-            editable: false,
-            disabled: isDisabled,
-            autocomplete: autoComplete,
-            onKeydown: keydownEvent,
-            onKeyup: keyupEvent,
-            onClick: clickEvent,
-            onChange: changeEvent,
-            onFocus: focusEvent,
-            onBlur: blurEvent
-          })
-        ]),
-        suffix || renderEmptyElement($xeDateRangePicker),
-        // 下拉面板
-        renderPanel()
-      ]);
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-date-range-picker",
+            `type--${type}`,
+            className,
+            {
+              [`size--${vSize}`]: vSize,
+              "is--prefix": !!prefix,
+              "is--suffix": !!suffix,
+              "is--visible": visiblePanel,
+              "is--disabled": isDisabled,
+              "is--active": isActivated,
+              "show--clear": isClearable && !isDisabled && (selectStValue || selectEdValue)
+            }
+          ],
+          style: currStyle,
+          spellcheck: false
+        },
+        [
+          prefix || renderEmptyElement($xeDateRangePicker),
+          h(
+            "div",
+            {
+              class: "vxe-date-range-picker--wrapper"
+            },
+            [
+              h("input", {
+                ref: refInputTarget,
+                class: "vxe-date-range-picker--inner" + (inputClassName ? " " + inputClassName : ""),
+                value: inputLabel,
+                name,
+                type: "text",
+                placeholder: inpPlaceholder,
+                editable: false,
+                disabled: isDisabled,
+                autocomplete: autoComplete,
+                onKeydown: keydownEvent,
+                onKeyup: keyupEvent,
+                onClick: clickEvent,
+                onChange: changeEvent,
+                onFocus: focusEvent,
+                onBlur: blurEvent
+              })
+            ]
+          ),
+          suffix || renderEmptyElement($xeDateRangePicker),
+          // 下拉面板
+          renderPanel()
+        ]
+      );
     };
-    watch(() => props.modelValue, () => {
-      updateModelValue(true);
-    });
+    watch(
+      () => props.modelValue,
+      () => {
+        updateModelValue(true);
+      }
+    );
     watch(computeMVal, () => {
       updateModelValue(false);
     });