plain-design 1.0.0-beta.23 → 1.0.0-beta.24

package/src/packages/components/TimePicker/time.utils.ts

@@ -1,99 +1,99 @@
-import {useTimeHooks} from "./useTimeHooks";
-import {PDate} from "../../utils/plainDate";
-import {ComponentEvent, ComponentPropsType, computed, ExtractPropTypes, PropType, tSlotsType} from "plain-design-composition";
-import {EditProps, tEditComputed} from "../../uses/useEdit";
-import {StyleProps} from "../../uses/useStyle";
-import {TimePanelProps} from "./panel/TimePanel";
-import Input from "../Input";
-import {iPopupEditorUseOption} from "../usePopupEditor";
-
-export const TimePropsOption = {
-  ...StyleProps,
-  ...EditProps,
-  ...TimePanelProps,
-  popperAttrs: { type: Object as PropType<iPopupEditorUseOption> },
-  inputAttrs: { type: Object as PropType<ComponentPropsType<typeof Input>> },
-} as const;
-
-export const TimeEmitsOption = {
-  onUpdateModelValue: (val?: string | null | undefined) => true,
-  onUpdateStart: (val?: string | null | undefined) => true,
-  onUpdateEnd: (val?: string | null | undefined) => true,
-  onBlur: (e: FocusEvent) => true,
-  onFocus: (e: FocusEvent) => true,
-} as const;
-
-export const TimeSlotsOption = ['foot', 'default'] as const;
-
-export type iTimePropsType = ExtractPropTypes<typeof TimePropsOption>
-
-export type tTimeCompositionParams = {
-  /*相关钩子函数*/
-  hooks: ReturnType<typeof useTimeHooks>,
-  /*正则对象实例，用来检测输入的值是否符合display格式*/
-  displayPattern: { value: RegExp },
-  /*当前时间PDate对象*/
-  today: { value: PDate },
-  /*最大最小PDate计算属性*/
-  maxmin: { value: { max: null | PDate, min: null | PDate } },
-  emit: ComponentEvent<typeof TimeEmitsOption>["emit"],
-  props: iTimePropsType,
-  editComputed: tEditComputed,
-  slots: tSlotsType<typeof TimeSlotsOption>,
-  /*获取popper公共的属性设置*/
-  getPublicPopperAttrs: () => any,
-  /*获取继承的time公共属性*/
-  getInheritPublicTimeAttrs: () => any,
-} & ReturnType<typeof useTimeFormat>
-
-export const TimeLayoutToFormat = {
-  h: 'HH',
-  m: 'mm',
-  s: 'ss',
-};
-
-/**
- * 限制pd的最大最小值
- * @author  韦胜健
- * @date    2022.7.3 19:51
- */
-export const limitDatetimeTimePlainData = ({ pd, maxmin, jdView }: { pd: PDate, maxmin: { value: { max: null | PDate, min: null | PDate } }, jdView: 'Hms' | 'YMDHms' }): PDate => {
-  /*检查最大最小值*/
-  const { max, min } = maxmin.value;
-  if (!!max && max[jdView] < pd[jdView]) pd = max;
-  if (!!min && min[jdView] > pd[jdView]) pd = min;
-  return pd;
-};
-
-/**
- * 获取默认的time格式化字符串
- * @author  韦胜健
- * @date    2022/12/5 15:17
- */
-export function useTimeFormat(props: { layout: string | string[], displayFormat?: string, valueFormat?: string }) {
-  const layoutArray = computed((): string[] => Array.isArray(props.layout) ? props.layout : props.layout.split(''));
-  const defaultFormatString = computed(() => {
-    const { layout } = props;
-    const formatArray: string[] = [];
-    if (layout.indexOf('h') > -1) {
-      formatArray.push('HH');
-    }
-    if (layout.indexOf('m') > -1) {
-      formatArray.push('mm');
-    }
-    if (layout.indexOf('s') > -1) {
-      formatArray.push('ss');
-    }
-    return formatArray.join(':');
-  });
-  /**
-   * 默认的格式化字符串
-   * @author  韦胜健
-   * @date    2022.12.4 17:32
-   */
-  const formatString = computed(() => {
-    const { displayFormat, valueFormat } = props;
-    return { displayFormat: displayFormat || defaultFormatString.value, valueFormat: valueFormat || defaultFormatString.value, };
-  });
-  return { formatString, layoutArray };
-}
+import {useTimeHooks} from "./useTimeHooks";
+import {PDate} from "../../utils/plainDate";
+import {ComponentEvent, ComponentPropsType, computed, ExtractPropTypes, PropType, tSlotsType} from "plain-design-composition";
+import {EditProps, tEditComputed} from "../../uses/useEdit";
+import {StyleProps} from "../../uses/useStyle";
+import {TimePanelProps} from "./panel/TimePanel";
+import Input from "../Input";
+import {iPopupEditorUseOption} from "../usePopupEditor";
+
+export const TimePropsOption = {
+  ...StyleProps,
+  ...EditProps,
+  ...TimePanelProps,
+  popperAttrs: { type: Object as PropType<iPopupEditorUseOption> },
+  inputAttrs: { type: Object as PropType<ComponentPropsType<typeof Input>> },
+} as const;
+
+export const TimeEmitsOption = {
+  onUpdateModelValue: (val?: string | null | undefined) => true,
+  onUpdateStart: (val?: string | null | undefined) => true,
+  onUpdateEnd: (val?: string | null | undefined) => true,
+  onBlur: (e: FocusEvent) => true,
+  onFocus: (e: FocusEvent) => true,
+} as const;
+
+export const TimeSlotsOption = ['foot', 'default'] as const;
+
+export type iTimePropsType = ExtractPropTypes<typeof TimePropsOption>
+
+export type tTimeCompositionParams = {
+  /*相关钩子函数*/
+  hooks: ReturnType<typeof useTimeHooks>,
+  /*正则对象实例，用来检测输入的值是否符合display格式*/
+  displayPattern: { value: RegExp },
+  /*当前时间PDate对象*/
+  today: { value: PDate },
+  /*最大最小PDate计算属性*/
+  maxmin: { value: { max: null | PDate, min: null | PDate } },
+  emit: ComponentEvent<typeof TimeEmitsOption>["emit"],
+  props: iTimePropsType,
+  editComputed: tEditComputed,
+  slots: tSlotsType<typeof TimeSlotsOption>,
+  /*获取popper公共的属性设置*/
+  getPublicPopperAttrs: () => any,
+  /*获取继承的time公共属性*/
+  getInheritPublicTimeAttrs: () => any,
+} & ReturnType<typeof useTimeFormat>
+
+export const TimeLayoutToFormat = {
+  h: 'HH',
+  m: 'mm',
+  s: 'ss',
+};
+
+/**
+ * 限制pd的最大最小值
+ * @author  韦胜健
+ * @date    2022.7.3 19:51
+ */
+export const limitDatetimeTimePlainData = ({ pd, maxmin, jdView }: { pd: PDate, maxmin: { value: { max: null | PDate, min: null | PDate } }, jdView: 'Hms' | 'YMDHms' }): PDate => {
+  /*检查最大最小值*/
+  const { max, min } = maxmin.value;
+  if (!!max && max[jdView] < pd[jdView]) pd = max;
+  if (!!min && min[jdView] > pd[jdView]) pd = min;
+  return pd;
+};
+
+/**
+ * 获取默认的time格式化字符串
+ * @author  韦胜健
+ * @date    2022/12/5 15:17
+ */
+export function useTimeFormat(props: { layout: string | string[], displayFormat?: string, valueFormat?: string }) {
+  const layoutArray = computed((): string[] => Array.isArray(props.layout) ? props.layout : props.layout.split(''));
+  const defaultFormatString = computed(() => {
+    const { layout } = props;
+    const formatArray: string[] = [];
+    if (layout.indexOf('h') > -1) {
+      formatArray.push('HH');
+    }
+    if (layout.indexOf('m') > -1) {
+      formatArray.push('mm');
+    }
+    if (layout.indexOf('s') > -1) {
+      formatArray.push('ss');
+    }
+    return formatArray.join(':');
+  });
+  /**
+   * 默认的格式化字符串
+   * @author  韦胜健
+   * @date    2022.12.4 17:32
+   */
+  const formatString = computed(() => {
+    const { displayFormat, valueFormat } = props;
+    return { displayFormat: displayFormat || defaultFormatString.value, valueFormat: valueFormat || defaultFormatString.value, };
+  });
+  return { formatString, layoutArray };
+}

package/src/packages/components/TimePicker/useRangeTimeRender.tsx

@@ -1,235 +1,235 @@
-import {computed, getComponentCls, iHTMLInputElement, reactive, useModel, useRefs} from "plain-design-composition";
-import Input from "../Input";
-import {delay} from "plain-utils/utils/delay";
-import {useFocusHandler} from "../../uses/useFocusHandler";
-import {PDate, plainDate} from "../../utils/plainDate";
-import {TimePanelLayout} from "./panel/TimeBasePanel";
-import {TimeRangePanelType} from "./panel/TimeRangePanel";
-import {limitDatetimeTimePlainData, TimeLayoutToFormat, tTimeCompositionParams} from "./time.utils";
-import {debounce} from "plain-utils/utils/debounce";
-import {useRenderReference} from "../../uses/useRenderReference";
-import {createEffects} from "plain-utils/utils/createEffects";
-
-export function useRangeTimeRender({ props, emit, onBlur, slots, displayPattern, today, onInputClear, maxmin, formatString }: tTimeCompositionParams & { onBlur: () => void, onInputClear?: (range: TimeRangePanelType) => void, }) {
-  const { effects } = createEffects();
-  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, });
-  const reference = useRenderReference();
-  const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) });
-  const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) });
-
-  const { isFocus } = useFocusHandler({
-    getEls: () => [refs.start, refs.end],
-    /**
-     * Input失去焦点事件，将文本框的值重置为display的值，以避免显示输入不正确的值
-     * @author  韦胜健
-     * @date    2022.7.3 12:27
-     */
-    onBlur: (e) => {
-      state.input.start = format.value.start?.getDisplay();
-      state.input.end = format.value.end?.getDisplay();
-      emit.onBlur(e);
-      onBlur();
-    },
-    onFocus: emit.onFocus,
-  });
-
-  const format = computed((): { start: null | PDate, end: null | PDate } => ({
-    start: !startModel.value ? null : plainDate(startModel.value, formatString.value),
-    end: !endModel.value ? null : plainDate(endModel.value, formatString.value),
-  }));
-
-  const state = reactive({
-    input: {
-      start: format.value.start?.getDisplay(),
-      end: format.value.end?.getDisplay(),
-    },
-    hoverColumnType: null as null | TimePanelLayout,
-    hoverRangeType: null as null | TimeRangePanelType,
-  });
-
-  const utils = {
-    handleRangeType: (config: { range: TimeRangePanelType, start: () => void, end: () => void }) => {config.range === TimeRangePanelType.start ? config.start() : config.end();},
-    apply: (val: string, type: 'input' | 'picker', range: TimeRangePanelType) => {
-
-      /**
-       * picker在update的时候，会一起派发update start以及update end，即使某个值可能没变
-       * 这里做一层控制，某个值没变化的时候，不往下处理
-       * @author  韦胜健
-       * @date    2022.7.3 19:59
-       */
-      if (type === "picker") {
-        if (range === TimeRangePanelType.start) {
-          if (val === startModel.value) {return;}
-        }
-        if (range === TimeRangePanelType.end) {
-          if (val === endModel.value) {return;}
-        }
-      }
-
-      /*如果输入值得来源是input，将display格式化为value*/
-      if (type === "input") {
-        state.hoverColumnType = null;
-        state.hoverRangeType = null;
-        utils.handleRangeType({ range, start: () => state.input.start = val, end: () => state.input.end = val });
-        if (!val) {
-          /*当清空input的值得时候，这里不做处理，因为开始时间与结束时间必须同时存在*/
-          // utils.handleRangeType({ range, start: () => startModel.value = null, end: () => endModel.value = null });
-          onInputClear?.(range);
-          return;
-        } else {
-          /*有值*/
-          if (!displayPattern.value.test(val)) {
-            /*输入值得格式与显示值格式不一致，不做任何处理*/
-            return;
-          } else {
-            /*将输入值格式化为实际值*/
-            let pd = today.value.useDisplay(val);
-            if (!pd.getDayJs().isValid()) {
-              /*输入值格式不正确，，什么是也不做*/
-              return;
-            }
-            val = pd.getValue();
-          }
-        }
-      }
-
-      const jdView = 'Hms';
-
-      /*检查最大最小值*/
-      let pd = limitDatetimeTimePlainData({ pd: today.value.useValue(val), maxmin, jdView });
-
-      utils.handleRangeType({
-        range,
-        start: () => {
-          startModel.value = pd.getValue();
-          const { end: epd } = format.value;
-          if (!!epd && pd[jdView] > epd[jdView]) {
-            endModel.value = startModel.value;
-            state.input.end = pd.getDisplay();
-          }
-          if (type === "picker") {
-            state.input.start = pd.getDisplay();
-          }
-        },
-        end: () => {
-          endModel.value = pd.getValue();
-          const { start: spd } = format.value;
-          if (!!spd && pd[jdView] < spd[jdView]) {
-            startModel.value = endModel.value;
-            state.input.start = pd.getDisplay();
-          }
-          if (type === "picker") {
-            state.input.end = pd.getDisplay();
-          }
-        },
-      });
-
-      utils.resetInputSelection();
-    },
-    /**
-     * 重设input的selection
-     * @author  韦胜健
-     * @date    2022.7.3 13:50
-     */
-    resetInputSelection: debounce(() => {
-      if (state.hoverColumnType == null) {return;}
-      const input = state.hoverRangeType === TimeRangePanelType.start ? refs.start : refs.end;
-      if (!input) {return;}
-      if (input !== document.activeElement) {input.focus();}
-      const format = (TimeLayoutToFormat as any)[state.hoverColumnType];
-      const start = formatString.value.displayFormat.indexOf(format);
-      input.setSelectionRange(start, start + 2);
-    }, 100),
-  };
-
-  const handler = {
-    /**
-     * 处理picker更新 start值
-     * @author  韦胜健
-     * @date    2022.7.3 19:30
-     */
-    onPickerUpdateStart: (val: any) => {utils.apply(val, 'picker', TimeRangePanelType.start);},
-    /**
-     * 处理picker更新end值
-     * @author  韦胜健
-     * @date    2022.7.3 19:30
-     */
-    onPickerUpdateEnd: (val: any) => {utils.apply(val, 'picker', TimeRangePanelType.end);},
-    /**
-     * 处理start input更新start值
-     * @author  韦胜健
-     * @date    2022.7.3 19:31
-     */
-    onStartInputChange: (e: any) => {utils.apply(e.target.value, 'input', TimeRangePanelType.start);},
-    /**
-     * 处理end input更新end值
-     * @author  韦胜健
-     * @date    2022.7.3 19:31
-     */
-    onEndInputChange: (e: any) => {utils.apply(e.target.value, 'input', TimeRangePanelType.end);},
-    /**
-     * 点击start panel事件
-     * @author  韦胜健
-     * @date    2022.7.3 19:31
-     */
-    onMousedownStartPanel: () => {delay().then(() => refs.start?.focus());},
-    /**
-     * 点击end panel事件
-     * @author  韦胜健
-     * @date    2022.7.3 19:31
-     */
-    onMousedownEndPanel: () => {delay().then(() => refs.end?.focus());},
-    /**
-     * 鼠标进入time column，令对应的input设置selection
-     * @author  韦胜健
-     * @date    2022.7.3 19:32
-     */
-    onEnterColumn: (type: TimePanelLayout, range?: TimeRangePanelType) => {
-      state.hoverColumnType = type;
-      state.hoverRangeType = range!;
-      utils.resetInputSelection();
-    },
-    /**
-     * 处理Input的clear事件
-     * @author  韦胜健
-     * @date    2022.7.3 20:03
-     */
-    onInputClear: () => {
-      startModel.value = null;
-      endModel.value = null;
-      state.input.start = undefined;
-      state.input.end = undefined;
-    },
-  };
-
-  const renderPickerFoot = () => slots.foot.isExist() && (
-    <div className={getComponentCls('time-foot')}>
-      {slots.foot()}
-    </div>
-  );
-
-  const getInputAttrs = () => ({
-    ref: onRef.input,
-    suffixIcon: 'pi-clock-circle',
-    placeValue: [startModel.value, endModel.value].join('-'),
-    isFocus: isFocus.value,
-    clearHandler: handler.onInputClear,
-    ...props.inputAttrs,
-  });
-
-  return {
-    effects,
-    refs,
-    onRef,
-    startModel,
-    endModel,
-    isFocus,
-    format,
-    state,
-    utils,
-    renderPickerFoot,
-    handler,
-    getInputAttrs,
-    reference,
-  };
-}
+import {computed, getComponentCls, iHTMLInputElement, reactive, useModel, useRefs} from "plain-design-composition";
+import Input from "../Input";
+import {delay} from "plain-utils/utils/delay";
+import {useFocusHandler} from "../../uses/useFocusHandler";
+import {PDate, plainDate} from "../../utils/plainDate";
+import {TimePanelLayout} from "./panel/TimeBasePanel";
+import {TimeRangePanelType} from "./panel/TimeRangePanel";
+import {limitDatetimeTimePlainData, TimeLayoutToFormat, tTimeCompositionParams} from "./time.utils";
+import {debounce} from "plain-utils/utils/debounce";
+import {useRenderReference} from "../../uses/useRenderReference";
+import {createEffects} from "plain-utils/utils/createEffects";
+
+export function useRangeTimeRender({ props, emit, onBlur, slots, displayPattern, today, onInputClear, maxmin, formatString }: tTimeCompositionParams & { onBlur: () => void, onInputClear?: (range: TimeRangePanelType) => void, }) {
+  const { effects } = createEffects();
+  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, });
+  const reference = useRenderReference();
+  const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) });
+  const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) });
+
+  const { isFocus } = useFocusHandler({
+    getEls: () => [refs.start, refs.end],
+    /**
+     * Input失去焦点事件，将文本框的值重置为display的值，以避免显示输入不正确的值
+     * @author  韦胜健
+     * @date    2022.7.3 12:27
+     */
+    onBlur: (e) => {
+      state.input.start = format.value.start?.getDisplay();
+      state.input.end = format.value.end?.getDisplay();
+      emit.onBlur(e);
+      onBlur();
+    },
+    onFocus: emit.onFocus,
+  });
+
+  const format = computed((): { start: null | PDate, end: null | PDate } => ({
+    start: !startModel.value ? null : plainDate(startModel.value, formatString.value),
+    end: !endModel.value ? null : plainDate(endModel.value, formatString.value),
+  }));
+
+  const state = reactive({
+    input: {
+      start: format.value.start?.getDisplay(),
+      end: format.value.end?.getDisplay(),
+    },
+    hoverColumnType: null as null | TimePanelLayout,
+    hoverRangeType: null as null | TimeRangePanelType,
+  });
+
+  const utils = {
+    handleRangeType: (config: { range: TimeRangePanelType, start: () => void, end: () => void }) => {config.range === TimeRangePanelType.start ? config.start() : config.end();},
+    apply: (val: string, type: 'input' | 'picker', range: TimeRangePanelType) => {
+
+      /**
+       * picker在update的时候，会一起派发update start以及update end，即使某个值可能没变
+       * 这里做一层控制，某个值没变化的时候，不往下处理
+       * @author  韦胜健
+       * @date    2022.7.3 19:59
+       */
+      if (type === "picker") {
+        if (range === TimeRangePanelType.start) {
+          if (val === startModel.value) {return;}
+        }
+        if (range === TimeRangePanelType.end) {
+          if (val === endModel.value) {return;}
+        }
+      }
+
+      /*如果输入值得来源是input，将display格式化为value*/
+      if (type === "input") {
+        state.hoverColumnType = null;
+        state.hoverRangeType = null;
+        utils.handleRangeType({ range, start: () => state.input.start = val, end: () => state.input.end = val });
+        if (!val) {
+          /*当清空input的值得时候，这里不做处理，因为开始时间与结束时间必须同时存在*/
+          // utils.handleRangeType({ range, start: () => startModel.value = null, end: () => endModel.value = null });
+          onInputClear?.(range);
+          return;
+        } else {
+          /*有值*/
+          if (!displayPattern.value.test(val)) {
+            /*输入值得格式与显示值格式不一致，不做任何处理*/
+            return;
+          } else {
+            /*将输入值格式化为实际值*/
+            let pd = today.value.useDisplay(val);
+            if (!pd.getDayJs().isValid()) {
+              /*输入值格式不正确，，什么是也不做*/
+              return;
+            }
+            val = pd.getValue();
+          }
+        }
+      }
+
+      const jdView = 'Hms';
+
+      /*检查最大最小值*/
+      let pd = limitDatetimeTimePlainData({ pd: today.value.useValue(val), maxmin, jdView });
+
+      utils.handleRangeType({
+        range,
+        start: () => {
+          startModel.value = pd.getValue();
+          const { end: epd } = format.value;
+          if (!!epd && pd[jdView] > epd[jdView]) {
+            endModel.value = startModel.value;
+            state.input.end = pd.getDisplay();
+          }
+          if (type === "picker") {
+            state.input.start = pd.getDisplay();
+          }
+        },
+        end: () => {
+          endModel.value = pd.getValue();
+          const { start: spd } = format.value;
+          if (!!spd && pd[jdView] < spd[jdView]) {
+            startModel.value = endModel.value;
+            state.input.start = pd.getDisplay();
+          }
+          if (type === "picker") {
+            state.input.end = pd.getDisplay();
+          }
+        },
+      });
+
+      utils.resetInputSelection();
+    },
+    /**
+     * 重设input的selection
+     * @author  韦胜健
+     * @date    2022.7.3 13:50
+     */
+    resetInputSelection: debounce(() => {
+      if (state.hoverColumnType == null) {return;}
+      const input = state.hoverRangeType === TimeRangePanelType.start ? refs.start : refs.end;
+      if (!input) {return;}
+      if (input !== document.activeElement) {input.focus();}
+      const format = (TimeLayoutToFormat as any)[state.hoverColumnType];
+      const start = formatString.value.displayFormat.indexOf(format);
+      input.setSelectionRange(start, start + 2);
+    }, 100),
+  };
+
+  const handler = {
+    /**
+     * 处理picker更新 start值
+     * @author  韦胜健
+     * @date    2022.7.3 19:30
+     */
+    onPickerUpdateStart: (val: any) => {utils.apply(val, 'picker', TimeRangePanelType.start);},
+    /**
+     * 处理picker更新end值
+     * @author  韦胜健
+     * @date    2022.7.3 19:30
+     */
+    onPickerUpdateEnd: (val: any) => {utils.apply(val, 'picker', TimeRangePanelType.end);},
+    /**
+     * 处理start input更新start值
+     * @author  韦胜健
+     * @date    2022.7.3 19:31
+     */
+    onStartInputChange: (e: any) => {utils.apply(e.target.value, 'input', TimeRangePanelType.start);},
+    /**
+     * 处理end input更新end值
+     * @author  韦胜健
+     * @date    2022.7.3 19:31
+     */
+    onEndInputChange: (e: any) => {utils.apply(e.target.value, 'input', TimeRangePanelType.end);},
+    /**
+     * 点击start panel事件
+     * @author  韦胜健
+     * @date    2022.7.3 19:31
+     */
+    onMousedownStartPanel: () => {delay().then(() => refs.start?.focus());},
+    /**
+     * 点击end panel事件
+     * @author  韦胜健
+     * @date    2022.7.3 19:31
+     */
+    onMousedownEndPanel: () => {delay().then(() => refs.end?.focus());},
+    /**
+     * 鼠标进入time column，令对应的input设置selection
+     * @author  韦胜健
+     * @date    2022.7.3 19:32
+     */
+    onEnterColumn: (type: TimePanelLayout, range?: TimeRangePanelType) => {
+      state.hoverColumnType = type;
+      state.hoverRangeType = range!;
+      utils.resetInputSelection();
+    },
+    /**
+     * 处理Input的clear事件
+     * @author  韦胜健
+     * @date    2022.7.3 20:03
+     */
+    onInputClear: () => {
+      startModel.value = null;
+      endModel.value = null;
+      state.input.start = undefined;
+      state.input.end = undefined;
+    },
+  };
+
+  const renderPickerFoot = () => slots.foot.isExist() && (
+    <div className={getComponentCls('time-foot')}>
+      {slots.foot()}
+    </div>
+  );
+
+  const getInputAttrs = () => ({
+    ref: onRef.input,
+    suffixIcon: 'pi-clock-circle',
+    placeValue: [startModel.value, endModel.value].join('-'),
+    isFocus: isFocus.value,
+    clearHandler: handler.onInputClear,
+    ...props.inputAttrs,
+  });
+
+  return {
+    effects,
+    refs,
+    onRef,
+    startModel,
+    endModel,
+    isFocus,
+    format,
+    state,
+    utils,
+    renderPickerFoot,
+    handler,
+    getInputAttrs,
+    reference,
+  };
+}