From f278f4a9ea3c0bb860df22df0930ed09779d86c1 Mon Sep 17 00:00:00 2001
From: qlin <haizekuo@gmail.com>
Date: Fri, 29 Apr 2022 16:46:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20date-picker=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=97=A5=E6=9C=9F=20(#119)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: date-picker 支持输入日期

* fix: 修复 date-picker range 初始化时间选择问题

* fix: 修复单选的日期输入问题
---
 components/date-picker/calendar.vue           | 113 +++++++-----
 components/date-picker/calendars.vue          |  69 +++----
 components/date-picker/const.ts               |  67 +------
 components/date-picker/datePicker.vue         | 174 +++++++++---------
 components/date-picker/helper.ts              |  12 +-
 components/date-picker/interface.ts           |   4 -
 components/date-picker/pickerHander.ts        | 164 +++++++++++++++++
 components/date-picker/rangeInput.vue         |   5 +-
 components/date-picker/useCalendar.ts         | 155 ++++++++++------
 components/date-picker/useRange.ts            |  39 ++--
 components/popper/props.ts                    |   3 +
 components/popper/useTrigger.ts               |   2 +-
 components/time-picker/time-picker.vue        |   2 -
 .../components/datePicker/rangeSelect.vue     |   2 +-
 14 files changed, 477 insertions(+), 334 deletions(-)
 create mode 100644 components/date-picker/pickerHander.ts

diff --git a/components/date-picker/calendar.vue b/components/date-picker/calendar.vue
index c9033485..85886056 100644
--- a/components/date-picker/calendar.vue
+++ b/components/date-picker/calendar.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="prefixCls">
-        <div v-if="hasTime" :class="`${prefixCls}-input`">
+        <div v-if="pickerRef.hasTime" :class="`${prefixCls}-input`">
             <InputInner
                 :modelValue="inputDate"
                 :class="`${prefixCls}-input-date`"
@@ -126,11 +126,15 @@ import TimePicker from '../time-picker/time-picker.vue';
 import InputInner from '../input/inputInner.vue';
 import getPrefixCls from '../_util/getPrefixCls';
 
-import { timeFormat, parseDate, transformDateToTimestamp } from './helper';
+import {
+    timeFormat,
+    parseDate,
+    transformDateToTimestamp,
+    isEffectiveDate,
+} from './helper';
 import {
     RANGE_POSITION,
     COMMON_PROPS,
-    DATE_TYPE,
     YEAR_COUNT,
     SELECTED_STATUS,
 } from './const';
@@ -147,6 +151,7 @@ import {
 
 import type { DayItem, DateObj, UpdateSelectedDates } from './interface';
 import { useLocale } from '../config-provider/useLocale';
+import { pickerFactory, Picker } from './pickerHander';
 
 const prefixCls = getPrefixCls('calendar');
 
@@ -182,36 +187,43 @@ const calendarProps = {
 
 export type CalendarProps = Partial<ExtractPropTypes<typeof calendarProps>>;
 
-function useDateInput(
-    props: CalendarProps,
-    selectedDates: Ref<DateObj[]>,
-    updateSelectedDates: UpdateSelectedDates,
-    activeIndex: Ref<number>,
-    updateCurrentDate: (date: Partial<DateObj>) => void,
-) {
+function useDateInput({
+    props,
+    selectedDates,
+    updateSelectedDates,
+    updateCurrentDate,
+    picker,
+}: {
+    props: CalendarProps;
+    selectedDates: Ref<DateObj[]>;
+    updateSelectedDates: UpdateSelectedDates;
+    updateCurrentDate: (date: Partial<DateObj>) => void;
+    picker: Ref<Picker>;
+}) {
     const inputDate = ref<string>();
     let cacheValidInputDate = '';
+    const currentIndex = computed(() => {
+        if (
+            picker.value.isRange &&
+            props.rangePosition === RANGE_POSITION.RIGHT
+        ) {
+            return 1;
+        }
+        return 0;
+    });
     const getDateStr = (i: number) => {
         return selectedDates.value[i]
             ? timeFormat(
                   transformDateToTimestamp(selectedDates.value[i]),
-                  props.format,
+                  'YYYY-MM-DD',
               )
             : '';
     };
     watch(
         selectedDates,
         () => {
-            if (
-                DATE_TYPE[props.type].isRange &&
-                props.rangePosition === RANGE_POSITION.RIGHT
-            ) {
-                cacheValidInputDate = getDateStr(1);
-                inputDate.value = cacheValidInputDate;
-            } else {
-                cacheValidInputDate = getDateStr(0);
-                inputDate.value = cacheValidInputDate;
-            }
+            cacheValidInputDate = getDateStr(currentIndex.value);
+            inputDate.value = cacheValidInputDate;
         },
         {
             immediate: true,
@@ -219,19 +231,26 @@ function useDateInput(
     );
 
     const handleDateInput = (val: string) => {
-        const d = new Date(val);
         inputDate.value = val;
-        if (/^\d{4}-\d{1,2}-\d{1,2}$/.test(val) && !Number.isNaN(d.getTime())) {
+        if (isEffectiveDate(val)) {
+            const d = parseDate(new Date(val));
             cacheValidInputDate = val;
-            updateCurrentDate(parseDate(d));
+            const otherDate = selectedDates.value[(currentIndex.value + 1) % 2];
+            // 在同一面板，不更新 current date
+            if (
+                otherDate &&
+                !(otherDate.year === d.year && otherDate.month === d.month)
+            ) {
+                updateCurrentDate(d);
+            }
             updateSelectedDates(
                 {
-                    ...selectedDates.value[activeIndex.value],
-                    year: d.getFullYear(),
-                    month: d.getMonth(),
-                    day: d.getDate(),
+                    ...selectedDates.value[currentIndex.value],
+                    year: d.year,
+                    month: d.month,
+                    day: d.day,
                 },
-                activeIndex.value,
+                currentIndex.value,
                 {
                     isDateInput: true,
                 },
@@ -264,40 +283,44 @@ export default defineComponent({
     props: calendarProps,
     emits: ['change', 'selectedDay', 'update:activeDate'],
     setup(props, { emit }) {
+        const pickerRef = computed(() => {
+            return pickerFactory(props.type);
+        });
         const { currentDate, updateCurrentDate } = useCurrentDate(props, emit);
 
         const { selectedDates, updateSelectedDates } = useSelectedDates(
             props,
             emit,
+            pickerRef,
         );
 
         const { t } = useLocale();
 
         const activeIndex = computed(() => {
-            if (DATE_TYPE[props.type].isRange) {
+            if (pickerRef.value.isRange) {
                 return props.rangePosition === RANGE_POSITION.LEFT ? 0 : 1;
             }
             return 0;
         });
 
         const { inputDate, handleDateInput, handleDateInputBlur } =
-            useDateInput(
+            useDateInput({
                 props,
                 selectedDates,
                 updateSelectedDates,
-                activeIndex,
                 updateCurrentDate,
-            );
+                picker: pickerRef,
+            });
 
         const { years, yearStart, yearEnd, selectYear, isYearSelect, yearCls } =
-            useYear(
+            useYear({
                 props,
                 selectedDates,
                 updateSelectedDates,
                 activeIndex,
                 currentDate,
                 updateCurrentDate,
-            );
+            });
 
         const {
             isMonthSelect,
@@ -305,22 +328,21 @@ export default defineComponent({
             monthToNext,
             monthToPre,
             monthCls,
-        } = useMonth(
+        } = useMonth({
             props,
             selectedDates,
             updateSelectedDates,
             activeIndex,
             currentDate,
             updateCurrentDate,
-        );
+        });
 
-        const { days, isDaySelect, weekNames, dayCls } = useDay(
+        const { days, isDaySelect, weekNames, dayCls } = useDay({
             props,
             selectedDates,
-            updateSelectedDates,
-            activeIndex,
             currentDate,
-        );
+            picker: pickerRef,
+        });
 
         const { isQuarterSelect, quarterList, selectQuarter, quarterCls } =
             useQuarter(
@@ -331,12 +353,13 @@ export default defineComponent({
                 currentDate,
             );
 
-        const { hasTime, currentTime, changeTime, innerDisabledTime } = useTime(
+        const { currentTime, changeTime, innerDisabledTime } = useTime({
             props,
             selectedDates,
             updateSelectedDates,
             activeIndex,
-        );
+            picker: pickerRef,
+        });
 
         const selecteDay = (info: DayItem) => {
             info.next && monthToNext();
@@ -347,7 +370,7 @@ export default defineComponent({
                 second?: number;
             } = {};
             if (
-                DATE_TYPE[props.type].hasTime &&
+                pickerRef.value.hasTime &&
                 !selectedDates.value[activeIndex.value]?.hour
             ) {
                 const date = new Date();
@@ -410,6 +433,7 @@ export default defineComponent({
 
         return {
             prefixCls,
+            pickerRef,
             currentDate,
             MONTHS_NAMES,
 
@@ -443,7 +467,6 @@ export default defineComponent({
             isNotDisabled,
             selecteDay,
 
-            hasTime,
             currentTime,
             changeTime,
             innerDisabledTime,
diff --git a/components/date-picker/calendars.vue b/components/date-picker/calendars.vue
index 63cb7d0c..a3ad33be 100644
--- a/components/date-picker/calendars.vue
+++ b/components/date-picker/calendars.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="prefixCls">
         <div>
-            <div v-if="isDateRange" :class="`${prefixCls}-daterange`">
+            <div v-if="pickerRef.isRange" :class="`${prefixCls}-daterange`">
                 <Calendar
                     :modelValue="tempCurrentValue"
                     :type="type"
@@ -94,16 +94,11 @@ import Calendar from './calendar.vue';
 import { useNormalModel } from '../_util/use/useModel';
 import FButton from '../button';
 import { contrastDate, getTimestampFromFormat } from './helper';
-import {
-    DATE_TYPE,
-    RANGE_POSITION,
-    COMMON_PROPS,
-    RANGE_PROPS,
-    DATE_TYPE_CURRENT,
-} from './const';
+import { RANGE_POSITION, COMMON_PROPS, RANGE_PROPS } from './const';
 
 import { useRange, useSelectStatus } from './useRange';
 import { useLocale } from '../config-provider/useLocale';
+import { pickerFactory } from './pickerHander';
 
 const prefixCls = getPrefixCls('calendars');
 
@@ -134,7 +129,10 @@ export default defineComponent({
     emits: ['update:modelValue', 'tmpSelectedDateChange', 'change'],
     setup(props, { emit }) {
         const [selectedDates] = useNormalModel(props, emit);
-        const currentDateType = computed(() => DATE_TYPE[props.type]);
+
+        const pickerRef = computed(() => {
+            return pickerFactory(props.type);
+        });
 
         const tempCurrentValue = ref<number[]>([]);
 
@@ -151,49 +149,29 @@ export default defineComponent({
         const { t } = useLocale();
 
         const currentText = computed(() => {
-            let currentText = '';
-            switch (currentDateType.value.currentText) {
-                case DATE_TYPE_CURRENT.now:
-                    currentText = t('datePicker.now');
-                    break;
-                case DATE_TYPE_CURRENT.today:
-                    currentText = t('datePicker.today');
-                    break;
-                case DATE_TYPE_CURRENT.currentYear:
-                    currentText = t('datePicker.currentYear');
-                    break;
-                case DATE_TYPE_CURRENT.currentMonth:
-                    currentText = t('datePicker.currentMonth');
-                    break;
-                case DATE_TYPE_CURRENT.currentQuarter:
-                    currentText = t('datePicker.currentQuarter');
-                    break;
-                default:
-                    break;
-            }
-            return currentText;
+            const confirmLang = pickerRef.value.confirmLang;
+            return confirmLang ? t(confirmLang) : '';
         });
 
         const { selectedStatus, selectedDay, lastSelectedPosition } =
             useSelectStatus(props);
         const {
-            isDateRange,
-
             leftActiveDate,
             rightActiveDate,
             changeCurrentDate,
             rangeDiabledDate,
             resetActiveDate,
-        } = useRange(
+        } = useRange({
             props,
             tempCurrentValue,
             innerDisabledDate,
             selectedStatus,
             lastSelectedPosition,
-        );
+            picker: pickerRef,
+        });
 
         const confirmDisabled = computed(() => {
-            if (DATE_TYPE[props.type].isRange) {
+            if (pickerRef.value.isRange) {
                 return !tempCurrentValue.value.length;
             }
 
@@ -203,12 +181,12 @@ export default defineComponent({
         const visibleFooter = computed(
             () =>
                 props.control ||
-                DATE_TYPE[props.type].isRange ||
-                DATE_TYPE[props.type].hasTime,
+                pickerRef.value.isRange ||
+                pickerRef.value.hasTime,
         );
 
         const change = () => {
-            if (DATE_TYPE[props.type].isRange) {
+            if (pickerRef.value.isRange) {
                 emit('change', tempCurrentValue.value);
             } else {
                 emit('change', tempCurrentValue.value[0]);
@@ -218,7 +196,7 @@ export default defineComponent({
         const updateTempCurrentValue = (val: number[]) => {
             tempCurrentValue.value = val;
 
-            if (DATE_TYPE[props.type].isRange) {
+            if (pickerRef.value.isRange) {
                 emit('tmpSelectedDateChange', tempCurrentValue.value);
             } else {
                 emit('tmpSelectedDateChange', tempCurrentValue.value[0]);
@@ -230,7 +208,7 @@ export default defineComponent({
         };
 
         const handleTempCurrentValue = () => {
-            if (DATE_TYPE[props.type].isRange) {
+            if (pickerRef.value.isRange) {
                 tempCurrentValue.value = selectedDates.value || [];
             } else {
                 tempCurrentValue.value = selectedDates.value
@@ -246,7 +224,7 @@ export default defineComponent({
                 if (props.visible) {
                     handleTempCurrentValue();
                     if (tempCurrentValue.value.length) {
-                        if (isDateRange.value) {
+                        if (pickerRef.value.isRange) {
                             resetActiveDate();
                         } else {
                             defaultActiveDate.value = tempCurrentValue.value[0];
@@ -260,16 +238,16 @@ export default defineComponent({
         );
 
         const selectCurrentTime = () => {
-            if (DATE_TYPE[props.type].isRange) {
+            if (pickerRef.value.isRange) {
                 // FEATURE：时间范围的没想清楚怎么处理，后续优化
-                const format = DATE_TYPE[props.type].format;
+                const format = pickerRef.value.format;
                 updateTempCurrentValue([
                     getTimestampFromFormat(null, format),
                     getTimestampFromFormat(null, format, true),
                 ]);
             } else {
                 updateTempCurrentValue([
-                    getTimestampFromFormat(null, DATE_TYPE[props.type].format),
+                    getTimestampFromFormat(null, pickerRef.value.format),
                 ]);
                 change();
             }
@@ -297,9 +275,8 @@ export default defineComponent({
             tempCurrentValue,
             change,
 
-            currentDateType,
+            pickerRef,
 
-            isDateRange,
             leftActiveDate,
             rightActiveDate,
             changeCurrentDate,
diff --git a/components/date-picker/const.ts b/components/date-picker/const.ts
index 5d6cdccb..650febcd 100644
--- a/components/date-picker/const.ts
+++ b/components/date-picker/const.ts
@@ -1,64 +1,5 @@
 import type { PropType } from 'vue';
-
-export const DATE_TYPE_CURRENT = {
-    now: 'now',
-    today: 'today',
-    currentYear: 'currentYear',
-    currentMonth: 'currentMonth',
-    currentQuarter: 'currentQuarter',
-};
-
-export const DATE_TYPE = {
-    date: {
-        name: 'date',
-        currentText: DATE_TYPE_CURRENT.today,
-        format: 'YYYY-MM-DD',
-        isRange: false,
-        hasTime: false,
-    },
-    datetime: {
-        name: 'datetime',
-        currentText: DATE_TYPE_CURRENT.now,
-        hasTime: true,
-        format: 'YYYY-MM-DD HH:mm:ss',
-        isRange: false,
-    },
-    daterange: {
-        name: 'daterange',
-        currentText: '',
-        isRange: true,
-        format: 'YYYY-MM-DD',
-        hasTime: false,
-    },
-    datetimerange: {
-        name: 'datetimerange',
-        currentText: '',
-        isRange: true,
-        hasTime: true,
-        format: 'YYYY-MM-DD HH:mm:ss',
-    },
-    year: {
-        name: 'year',
-        currentText: DATE_TYPE_CURRENT.currentYear,
-        format: 'YYYY',
-        isRange: false,
-        hasTime: false,
-    },
-    month: {
-        name: 'month',
-        currentText: DATE_TYPE_CURRENT.currentMonth,
-        format: 'YYYY-MM',
-        isRange: false,
-        hasTime: false,
-    },
-    quarter: {
-        name: 'quarter',
-        currentText: DATE_TYPE_CURRENT.currentQuarter,
-        format: 'YYYY-Q',
-        isRange: false,
-        hasTime: false,
-    },
-} as const;
+import { PickerType } from './pickerHander';
 
 export enum RANGE_POSITION {
     LEFT = 'left',
@@ -73,16 +14,14 @@ export enum SELECTED_STATUS {
 
 export const YEAR_COUNT = 16;
 
-export type DatePickerType = keyof typeof DATE_TYPE;
-
 export const COMMON_PROPS = {
     modelValue: {
         type: [Array, Number] as PropType<number | number[]>,
     },
     format: String,
     type: {
-        type: String as PropType<DatePickerType>,
-        default: DATE_TYPE.date.name,
+        type: String as PropType<PickerType>,
+        default: PickerType.date,
     },
     minDate: {
         type: Date,
diff --git a/components/date-picker/datePicker.vue b/components/date-picker/datePicker.vue
index 71994bfd..c73801e0 100644
--- a/components/date-picker/datePicker.vue
+++ b/components/date-picker/datePicker.vue
@@ -9,15 +9,16 @@
         :hideAfter="0"
         placement="bottom-start"
         :offset="4"
+        onlyShowTrigger
         @update:modelValue="handlePopperVisible"
     >
         <template #trigger>
             <RangeInput
-                v-if="isRange"
+                v-if="pickerRef.isRange"
                 ref="inputRangeRefEL"
-                :type="type"
+                :format="pickerRef.format"
                 :selectedDates="visibleValue"
-                :placeholder="rangePlaceholder"
+                :placeholder="rangePlaceHolder"
                 :clearable="clearable"
                 :disabled="disabled"
                 :innerIsFocus="inputIsFocus"
@@ -25,7 +26,6 @@
                 @focus="handleFocus"
                 @blur="handleBlur"
                 @clear="clear"
-                @click="isOpened = true"
             >
                 <template #separator>
                     <slot v-if="$slots.separator" name="separator"></slot>
@@ -39,17 +39,16 @@
             <InputInner
                 v-else
                 ref="inputRefEl"
-                v-model="dateText"
-                :placeholder="inputPlaceholder"
+                :modelValue="dateText"
+                :placeholder="singlePlaceHolder"
                 :disabled="disabled"
                 :clearable="clearable"
                 :innerIsFocus="inputIsFocus"
                 :style="style"
-                readonly
                 @focus="handleFocus"
-                @blur="handleBlur"
+                @input="handleDateInput"
+                @blur="handleDateInputBlur"
                 @clear="clear"
-                @click="isOpened = true"
             >
                 <template #suffix>
                     <slot v-if="$slots.suffixIcon" name="suffixIcon"></slot>
@@ -91,7 +90,6 @@ import {
     provide,
     CSSProperties,
 } from 'vue';
-import { isArray } from 'lodash-es';
 import RangeInput from './rangeInput.vue';
 import Calendars from './calendars.vue';
 import InputInner from '../input/inputInner.vue';
@@ -102,13 +100,14 @@ import getPrefixCls from '../_util/getPrefixCls';
 import { useTheme } from '../_theme/useTheme';
 import { DateOutlined, SwapRightOutlined } from '../icon';
 
-import { isEmptyValue, timeFormat } from './helper';
-import { DATE_TYPE, COMMON_PROPS, RANGE_PROPS } from './const';
+import { isEmptyValue, timeFormat, getTimestampFromFormat } from './helper';
+import { COMMON_PROPS, RANGE_PROPS } from './const';
 
 import type { GetContainer } from '../_util/interface';
 import { useLocale } from '../config-provider/useLocale';
 import { FORM_ITEM_INJECTION_KEY } from '../_util/constants';
 import { noop } from '../_util/utils';
+import { pickerFactory, Picker } from './pickerHander';
 
 const prefixCls = getPrefixCls('date-picker');
 
@@ -161,101 +160,85 @@ const useTmpSelectedDates = () => {
 
 export type DatePickerProps = Partial<ExtractPropTypes<typeof datePickerProps>>;
 
-const useInput = (props: DatePickerProps, visibleValue: Ref<number>) => {
-    const dateText = ref();
+const useInput = ({
+    visibleValue,
+    picker,
+    updateCurrentValue,
+}: {
+    visibleValue: Ref<number>;
+    picker: ComputedRef<Picker>;
+    updateCurrentValue: (val: any) => void;
+}) => {
+    const dateText = ref<string>();
+    let cacheValidInputDate = '';
 
     const getFormatDate = () => {
         if (isEmptyValue(visibleValue.value)) {
             return '';
         }
-        if (!DATE_TYPE[props.type].isRange) {
-            return timeFormat(visibleValue.value, DATE_TYPE[props.type].format);
+        if (!picker.value.isRange) {
+            return timeFormat(visibleValue.value, picker.value.format);
         }
         return '';
     };
     const resetDateText = () => {
         dateText.value = getFormatDate();
+        cacheValidInputDate = dateText.value;
     };
     watch(visibleValue, resetDateText, {
         immediate: true,
     });
 
+    const handleDateInput = (val: string) => {
+        dateText.value = val;
+        console.log(val, picker.value.isEffectiveDate(val));
+        if (picker.value.isEffectiveDate(val)) {
+            cacheValidInputDate = val;
+            updateCurrentValue(
+                getTimestampFromFormat(
+                    picker.value.getDateFromStr(val),
+                    picker.value.format,
+                ),
+            );
+        }
+    };
+    const handleDateInputBlur = () => {
+        if (dateText.value !== cacheValidInputDate && cacheValidInputDate) {
+            dateText.value = cacheValidInputDate;
+        }
+    };
+
     return {
         resetDateText,
         dateText,
+        handleDateInput,
+        handleDateInputBlur,
     };
 };
 
 const usePlaceholder = (
     props: DatePickerProps,
-    isRange: ComputedRef<boolean>,
+    picker: ComputedRef<Picker>,
 ) => {
     const { t } = useLocale();
-    const rangePlaceholder = computed(() => {
-        let placeholder: string[] = [];
-        if (!isRange.value) {
-            return placeholder;
-        }
-        if (props.placeholder) {
-            return isArray(props.placeholder)
-                ? props.placeholder
-                : [props.placeholder, props.placeholder];
-        }
 
-        switch (props.type) {
-            case DATE_TYPE.daterange.name:
-                placeholder = [
-                    t('datePicker.selectStartDate'),
-                    t('datePicker.selectEndDate'),
-                ];
-                break;
-            case DATE_TYPE.datetimerange.name:
-                placeholder = [
-                    t('datePicker.selectStartDateTime'),
-                    t('datePicker.selectEndDateTime'),
-                ];
-                break;
-            default:
-                placeholder = [t('datePicker.select'), t('datePicker.select')];
-                break;
+    const rangePlaceHolder = computed(() => {
+        if (props.placeholder) return props.placeholder;
+        const placeholderLang = picker.value.placeholderLang;
+        if (Array.isArray(placeholderLang)) {
+            return placeholderLang.map((item) => t(item));
         }
-        return placeholder;
+        return t(placeholderLang);
     });
 
-    const inputPlaceholder = computed(() => {
-        let placeholder = '';
-        if (isRange.value) {
-            return placeholder;
-        }
-        if (props.placeholder) {
-            return props.placeholder as string;
-        }
-        switch (props.type) {
-            case DATE_TYPE.year.name:
-                placeholder = t('datePicker.selectYear');
-                break;
-            case DATE_TYPE.month.name:
-                placeholder = t('datePicker.selectMonth');
-                break;
-            case DATE_TYPE.quarter.name:
-                placeholder = t('datePicker.selectQuarter');
-                break;
-            case DATE_TYPE.date.name:
-                placeholder = t('datePicker.selectDate');
-                break;
-            case DATE_TYPE.datetime.name:
-                placeholder = t('datePicker.selectDateTime');
-                break;
-            default:
-                placeholder = t('datePicker.select');
-                break;
-        }
-        return placeholder;
+    const singlePlaceHolder = computed(() => {
+        if (props.placeholder) return props.placeholder as string;
+        return t(picker.value.placeholderLang as string);
     });
 
     return {
-        inputPlaceholder,
-        rangePlaceholder,
+        rangePlaceHolder,
+        singlePlaceHolder,
     };
 };
 
@@ -284,26 +267,28 @@ export default defineComponent({
             prop: 'open',
         });
         const [currentValue, updateCurrentValue] = useNormalModel(props, emit);
-        const isRange = computed(() => DATE_TYPE[props.type].isRange);
+        const pickerRef = computed(() => {
+            return pickerFactory(props.type);
+        });
         const inputRefEl = ref<HTMLElement>();
         const inputRangeRefEL = ref<HTMLElement>();
         const calendarsRef = ref<ComponentPublicInstance>();
         const activeInputRefEL = computed(() => {
-            if (isRange.value) {
+            if (pickerRef.value.isRange) {
                 return inputRangeRefEL.value;
             }
             return inputRefEl.value;
         });
 
         const { validate, isError } = useFormAdaptor(
-            computed(() => (isRange.value ? 'array' : 'number')),
+            computed(() => (pickerRef.value.isRange ? 'array' : 'number')),
         );
         // 避免子组件重复
         provide(FORM_ITEM_INJECTION_KEY, { validate: noop, isError });
 
-        const { inputPlaceholder, rangePlaceholder } = usePlaceholder(
+        const { rangePlaceHolder, singlePlaceHolder } = usePlaceholder(
             props,
-            isRange,
+            pickerRef,
         );
 
         const { tmpSelectedDates, tmpSelectedDateChange } =
@@ -318,26 +303,34 @@ export default defineComponent({
             return currentValue.value;
         });
 
-        const { resetDateText, dateText } = useInput(props, visibleValue);
+        const {
+            resetDateText,
+            dateText,
+            handleDateInput,
+            handleDateInputBlur,
+        } = useInput({
+            visibleValue,
+            updateCurrentValue,
+            picker: pickerRef,
+        });
 
         const handleChange = (val: number | number[] | null) => {
             if (val !== currentValue.value) {
+                updateCurrentValue(val);
                 emit('change', val);
                 validate('change');
             }
         };
         // 事件
         const clear = () => {
-            const initValue: [] | null = isRange.value ? [] : null;
+            const initValue: [] | null = pickerRef.value.isRange ? [] : null;
             tmpSelectedDateChange(initValue);
-            updateCurrentValue(initValue);
-            emit('clear');
             handleChange(initValue);
+            emit('clear');
         };
 
         const change = (val: number | number[] | null) => {
             handleChange(val);
-            updateCurrentValue(val);
 
             // 选择完后重新聚焦
             // TODO 如果有取消按钮，取消之后也应该重新聚焦
@@ -393,7 +386,12 @@ export default defineComponent({
             visibleValue,
 
             dateText,
-            isRange,
+            handleDateInput,
+            handleDateInputBlur: (event: FocusEvent) => {
+                handleDateInputBlur();
+                handleBlur(event);
+            },
+            pickerRef,
 
             clear,
             change,
@@ -402,8 +400,8 @@ export default defineComponent({
             handleBlur,
 
             tmpSelectedDateChange,
-            inputPlaceholder,
-            rangePlaceholder,
+            rangePlaceHolder,
+            singlePlaceHolder,
 
             handlePopperVisible,
 
diff --git a/components/date-picker/helper.ts b/components/date-picker/helper.ts
index 0ae70a4d..547cb358 100644
--- a/components/date-picker/helper.ts
+++ b/components/date-picker/helper.ts
@@ -80,12 +80,14 @@ export function transformDateToTimestamp(
     isFullMax = false,
 ) {
     if (!date) return null;
+    // 将季度转换为月份
+    const month = date.month ?? (date.quarter ? (date.quarter - 1) * 3 : null);
     if (isFullMax) {
         const month = date.month ?? 11;
         const maxDay = new Date(date.year, month + 1, 0).getDate();
         return new Date(
             date.year,
-            date.month ?? 11,
+            month ?? 11,
             date.day ?? maxDay,
             date.hour ?? 23,
             date.minute ?? 59,
@@ -95,7 +97,7 @@ export function transformDateToTimestamp(
     }
     return new Date(
         date.year,
-        date.month ?? 0,
+        month ?? 0,
         date.day ?? 1,
         date.hour ?? 0,
         date.minute ?? 0,
@@ -143,3 +145,9 @@ export const getTimestampFromFormat = (
 
     return transformDateToTimestamp(dateObj, isFullMax);
 };
+
+const DATE_REG = /^\d{4}-\d{1,2}-\d{1,2}$/;
+
+export function isEffectiveDate(val: string) {
+    return DATE_REG.test(val) && !Number.isNaN(new Date(val).getTime());
+}
diff --git a/components/date-picker/interface.ts b/components/date-picker/interface.ts
index dfe99e4f..04426879 100644
--- a/components/date-picker/interface.ts
+++ b/components/date-picker/interface.ts
@@ -1,7 +1,3 @@
-import { DATE_TYPE } from './const';
-
-export type DatePickerType = keyof typeof DATE_TYPE;
-
 export type DateObj = {
     year: number;
     month: number;
diff --git a/components/date-picker/pickerHander.ts b/components/date-picker/pickerHander.ts
new file mode 100644
index 00000000..eaffd3f1
--- /dev/null
+++ b/components/date-picker/pickerHander.ts
@@ -0,0 +1,164 @@
+import { isEffectiveDate } from './helper';
+
+const DATE_TIME_REG = /^\d{4}-\d{1,2}-\d{1,2}\s+\d{1,2}:\d{1,2}:\d{1,2}$/;
+
+export enum PickerType {
+    date = 'date',
+    datetime = 'datetime',
+    daterange = 'daterange',
+    datetimerange = 'datetimerange',
+    year = 'year',
+    month = 'month',
+    quarter = 'quarter',
+}
+
+export interface Picker {
+    name: string;
+    confirmLang: string;
+    placeholderLang: string | string[];
+    format: string;
+    isRange: boolean;
+    hasTime: boolean;
+    isEffectiveDate(val: string): boolean;
+    getDateFromStr(val: string): Date;
+}
+
+export class DatePicker implements Picker {
+    name = PickerType.date;
+    confirmLang = 'datePicker.now';
+    placeholderLang = 'datePicker.selectDate';
+    format = 'YYYY-MM-DD';
+    isRange = false;
+    hasTime = false;
+    isEffectiveDate(val: string): boolean {
+        return isEffectiveDate(val);
+    }
+    getDateFromStr(val: string): Date {
+        return new Date(val);
+    }
+}
+
+export class DateTimePicker implements Picker {
+    name = PickerType.datetime;
+    confirmLang = 'datePicker.today';
+    placeholderLang = 'datePicker.selectDateTime';
+    format = 'YYYY-MM-DD HH:mm:ss';
+    isRange = false;
+    hasTime = true;
+    isEffectiveDate(val: string): boolean {
+        return (
+            DATE_TIME_REG.test(val) && !Number.isNaN(new Date(val).getTime())
+        );
+    }
+    getDateFromStr(val: string): Date {
+        return new Date(val);
+    }
+}
+
+export class DateRangePicker implements Picker {
+    name = PickerType.daterange;
+    confirmLang = '';
+    placeholderLang = [
+        'datePicker.selectStartDate',
+        'datePicker.selectEndDate',
+    ];
+    format = 'YYYY-MM-DD';
+    isRange = true;
+    hasTime = false;
+    isEffectiveDate(val: string): boolean {
+        return isEffectiveDate(val);
+    }
+    getDateFromStr(val: string): Date {
+        return new Date(val);
+    }
+}
+
+export class DateTimeRangePicker implements Picker {
+    name = PickerType.datetimerange;
+    confirmLang = '';
+    placeholderLang = [
+        'datePicker.selectStartDateTime',
+        'datePicker.selectEndDateTime',
+    ];
+    format = 'YYYY-MM-DD HH:mm:ss';
+    isRange = true;
+    hasTime = true;
+    isEffectiveDate(val: string): boolean {
+        return (
+            DATE_TIME_REG.test(val) && !Number.isNaN(new Date(val).getTime())
+        );
+    }
+    getDateFromStr(val: string): Date {
+        return new Date(val);
+    }
+}
+
+export class YearPicker implements Picker {
+    name = PickerType.year;
+    confirmLang = 'datePicker.currentYear';
+    placeholderLang = 'datePicker.selectYear';
+    format = 'YYYY';
+    isRange = false;
+    hasTime = false;
+    isEffectiveDate(val: string): boolean {
+        return /^\d{4}$/.test(val) && !Number.isNaN(new Date(val).getTime());
+    }
+    getDateFromStr(val: string): Date {
+        return new Date(val);
+    }
+}
+
+export class MonthPicker implements Picker {
+    name = PickerType.month;
+    confirmLang = 'datePicker.currentMonth';
+    placeholderLang = 'datePicker.selectMonth';
+    format = 'YYYY-MM';
+    isRange = false;
+    hasTime = false;
+    isEffectiveDate(val: string): boolean {
+        return (
+            /^\d{4}-\d{1,2}$/.test(val) &&
+            !Number.isNaN(new Date(val).getTime())
+        );
+    }
+    getDateFromStr(val: string): Date {
+        return new Date(val);
+    }
+}
+
+export class QuarterPicker implements Picker {
+    name = PickerType.quarter;
+    confirmLang = 'datePicker.currentQuarter';
+    placeholderLang = 'datePicker.selectQuarter';
+    format = 'YYYY-Q';
+    isRange = false;
+    hasTime = false;
+    isEffectiveDate(val: string): boolean {
+        return /^\d{4}-Q[1234]$/.test(val);
+    }
+    getDateFromStr(val: string): Date {
+        const [year, quarter] = val.match(/\d+/g);
+        return new Date(Number(year), (Number(quarter) - 1) * 3);
+    }
+}
+
+export function pickerFactory(type: string): Picker {
+    switch (type) {
+        case PickerType.date:
+            return new DatePicker();
+        case PickerType.datetime:
+            return new DateTimePicker();
+        case PickerType.daterange:
+            return new DateRangePicker();
+        case PickerType.datetimerange:
+            return new DateTimeRangePicker();
+        case PickerType.year:
+            return new YearPicker();
+        case PickerType.month:
+            return new MonthPicker();
+        case PickerType.quarter:
+            return new QuarterPicker();
+        default:
+            return new DatePicker();
+    }
+}
diff --git a/components/date-picker/rangeInput.vue b/components/date-picker/rangeInput.vue
index 39590df9..246a45c6 100644
--- a/components/date-picker/rangeInput.vue
+++ b/components/date-picker/rangeInput.vue
@@ -40,13 +40,12 @@ import { isArray } from 'lodash-es';
 import getPrefixCls from '../_util/getPrefixCls';
 import { CloseCircleFilled } from '../icon';
 
-import { DATE_TYPE } from './const';
 import { isEmptyValue, timeFormat } from './helper';
 
 const prefixCls = getPrefixCls('range-input');
 
 const rangeInputProps = {
-    type: String as PropType<keyof typeof DATE_TYPE>,
+    format: String,
     selectedDates: {
         type: Array as PropType<number[]>,
         default: () => [] as number[],
@@ -100,7 +99,7 @@ export default defineComponent({
             if (isEmptyValue(props.selectedDates)) {
                 return [];
             }
-            const format = DATE_TYPE[props.type].format;
+            const format = props.format;
             return [
                 timeFormat(props.selectedDates[0], format),
                 timeFormat(props.selectedDates[1], format),
diff --git a/components/date-picker/useCalendar.ts b/components/date-picker/useCalendar.ts
index 03114220..04f93e67 100644
--- a/components/date-picker/useCalendar.ts
+++ b/components/date-picker/useCalendar.ts
@@ -2,8 +2,9 @@ import { watch, watchEffect, ref, reactive, computed, Ref } from 'vue';
 import { isNil } from 'lodash-es';
 import getPrefixCls from '../_util/getPrefixCls';
 import { useNormalModel } from '../_util/use/useModel';
+import { Picker, PickerType } from './pickerHander';
 
-import { DATE_TYPE, SELECTED_STATUS, YEAR_COUNT } from './const';
+import { SELECTED_STATUS, YEAR_COUNT } from './const';
 import {
     parseDate,
     timeFormat,
@@ -48,16 +49,22 @@ export const useCurrentDate = (props: CalendarProps, emit: CalendarEmits) => {
 export const useSelectedDates = (
     props: CalendarProps,
     emit: (event: 'selectedDay' | 'change', ...args: any[]) => void,
+    picker: Ref<Picker>,
 ) => {
     const selectedDates = ref<DateObj[]>([]);
-    const updateRangeSelectedDates = (date: DateObj) => {
+    const updateRangeSelectedDates = (date: DateObj, index: number) => {
+        console.log(index);
         if (
-            transformDateToTimestamp(selectedDates.value[0]) >
-            transformDateToTimestamp(date)
+            (index === 0 &&
+                transformDateToTimestamp(date) >
+                    transformDateToTimestamp(selectedDates.value[1])) ||
+            (index === 1 &&
+                transformDateToTimestamp(date) <
+                    transformDateToTimestamp(selectedDates.value[0]))
         ) {
-            selectedDates.value.splice(0, 1, date);
+            selectedDates.value = [date, { ...date }];
         } else {
-            selectedDates.value.splice(1, 1, date);
+            selectedDates.value.splice(index, 1, date);
         }
     };
     const updateSelectedDates: UpdateSelectedDates = (
@@ -67,27 +74,34 @@ export const useSelectedDates = (
     ) => {
         const newDate = Object.assign({}, selectedDates.value[index], date);
         if (
-            DATE_TYPE[props.type].isRange &&
+            picker.value.isRange &&
             (option.isTime || option.isDateInput) &&
             props.selectedStatus === SELECTED_STATUS.TWO
         ) {
-            updateRangeSelectedDates(newDate);
+            updateRangeSelectedDates(newDate, index);
         } else if (
-            DATE_TYPE[props.type].isRange &&
+            picker.value.isRange &&
             (!selectedDates.value.length ||
                 props.selectedStatus === SELECTED_STATUS.TWO)
         ) {
             selectedDates.value = [newDate, { ...newDate }];
             emit('selectedDay');
-        } else if (!DATE_TYPE[props.type].isRange) {
+        } else if (!picker.value.isRange) {
             emit('selectedDay');
             selectedDates.value = [newDate];
         } else {
-            updateRangeSelectedDates(newDate);
+            if (
+                transformDateToTimestamp(selectedDates.value[0]) >
+                transformDateToTimestamp(newDate)
+            ) {
+                selectedDates.value.splice(0, 1, newDate);
+            } else {
+                selectedDates.value.splice(1, 1, newDate);
+            }
             emit('selectedDay');
         }
 
-        if (DATE_TYPE[props.type].isRange) {
+        if (picker.value.isRange) {
             emit('change', [
                 transformDateToTimestamp(selectedDates.value[0]),
                 transformDateToTimestamp(selectedDates.value[1], true),
@@ -116,18 +130,25 @@ export const useSelectedDates = (
     };
 };
 
-export function useYear(
-    props: CalendarProps,
-    selectedDates: Ref<DateObj[]>,
-    updateSelectedDates: UpdateSelectedDates,
-    activeIndex: Ref<number>,
-    currentDate: DateObj,
-    updateCurrentDate: UpdateCurrentDate,
-) {
+export function useYear({
+    props,
+    selectedDates,
+    updateSelectedDates,
+    activeIndex,
+    currentDate,
+    updateCurrentDate,
+}: {
+    props: CalendarProps;
+    selectedDates: Ref<DateObj[]>;
+    updateSelectedDates: UpdateSelectedDates;
+    activeIndex: Ref<number>;
+    currentDate: DateObj;
+    updateCurrentDate: UpdateCurrentDate;
+}) {
     const isYearSelect = ref(false);
     // 年份相关
     watchEffect(() => {
-        if (props.type === DATE_TYPE.year.name) {
+        if (props.type === PickerType.year) {
             isYearSelect.value = true;
         }
     });
@@ -162,7 +183,7 @@ export function useYear(
     };
 
     const isSelectedYear = (year: number) => {
-        if (props.type === DATE_TYPE.year.name) {
+        if (props.type === PickerType.year) {
             return !!selectedDates.value.find((item) => item?.year === year);
         }
         return false;
@@ -185,24 +206,31 @@ export function useYear(
     };
 }
 
-export function useMonth(
-    props: CalendarProps,
-    selectedDates: Ref<DateObj[]>,
-    updateSelectedDates: UpdateSelectedDates,
-    activeIndex: Ref<number>,
-    currentDate: DateObj,
-    updateCurrentDate: UpdateCurrentDate,
-) {
+export function useMonth({
+    props,
+    selectedDates,
+    updateSelectedDates,
+    activeIndex,
+    currentDate,
+    updateCurrentDate,
+}: {
+    props: CalendarProps;
+    selectedDates: Ref<DateObj[]>;
+    updateSelectedDates: UpdateSelectedDates;
+    activeIndex: Ref<number>;
+    currentDate: DateObj;
+    updateCurrentDate: UpdateCurrentDate;
+}) {
     // 月份相关
     const format = 'YYYY-MM';
     const isMonthSelect = ref(false);
     watchEffect(() => {
-        if (props.type === DATE_TYPE.month.name) {
+        if (props.type === PickerType.month) {
             isMonthSelect.value = true;
         }
     });
     const selectMonth = (month: number) => {
-        if (props.type !== DATE_TYPE.month.name) {
+        if (props.type !== PickerType.month) {
             isMonthSelect.value = false;
         }
         updateSelectedDates(
@@ -248,7 +276,7 @@ export function useMonth(
         return props.disabledDate && props.disabledDate(date, format);
     };
     const isSelectedMonth = (month: number) => {
-        if (props.type === DATE_TYPE.month.name) {
+        if (props.type === PickerType.month) {
             return !!selectedDates.value.find(
                 (item) =>
                     item &&
@@ -275,13 +303,17 @@ export function useMonth(
     };
 }
 
-export function useDay(
-    props: CalendarProps,
-    selectedDates: Ref<DateObj[]>,
-    updateSelectedDates: UpdateSelectedDates,
-    activeIndex: Ref<number>,
-    currentDate: DateObj,
-) {
+export function useDay({
+    props,
+    selectedDates,
+    currentDate,
+    picker,
+}: {
+    props: CalendarProps;
+    selectedDates: Ref<DateObj[]>;
+    currentDate: DateObj;
+    picker: Ref<Picker>;
+}) {
     const { t } = useLocale();
 
     // TODO 英文一个星期的第一天是 周日
@@ -295,11 +327,11 @@ export function useDay(
     });
     const isDaySelect = computed(() =>
         [
-            DATE_TYPE.date.name,
-            DATE_TYPE.datetime.name,
-            DATE_TYPE.daterange.name,
-            DATE_TYPE.datetimerange.name,
-        ].includes(props.type as any),
+            PickerType.date,
+            PickerType.datetime,
+            PickerType.daterange,
+            PickerType.datetimerange,
+        ].includes(props.type),
     );
 
     const days = computed(() => {
@@ -369,7 +401,7 @@ export function useDay(
     );
     // 样式计算
     const inRangeDate = (date: Date, format: string) => {
-        if (DATE_TYPE[props.type].isRange && startDate.value && endDate.value) {
+        if (picker.value.isRange && startDate.value && endDate.value) {
             const isIn =
                 contrastDate(date, startDate.value, format) === 1 &&
                 contrastDate(date, endDate.value, format) === -1;
@@ -390,11 +422,11 @@ export function useDay(
                 props.disabledDate && props.disabledDate(date, format),
             [`${prefixCls}-date-selected`]: selectedIndex !== -1,
             'is-start':
-                DATE_TYPE[props.type].isRange &&
+                picker.value.isRange &&
                 completeRangeSelected.value &&
                 selectedIndex === 0,
             'is-end':
-                DATE_TYPE[props.type].isRange &&
+                picker.value.isRange &&
                 completeRangeSelected.value &&
                 (selectedIndex === 1 ||
                     isSelected(selectedDates.value[1], item)),
@@ -419,9 +451,7 @@ export const useQuarter = (
     activeIndex: Ref<number>,
     currentDate: DateObj,
 ) => {
-    const isQuarterSelect = computed(
-        () => props.type === DATE_TYPE.quarter.name,
-    );
+    const isQuarterSelect = computed(() => props.type === PickerType.quarter);
 
     type QuarterItem = {
         name: string;
@@ -510,13 +540,19 @@ const transformTimeToDate = (timeStr: string) => {
     };
 };
 
-export const useTime = (
-    props: CalendarProps,
-    selectedDates: Ref<DateObj[]>,
-    updateSelectedDates: UpdateSelectedDates,
-    activeIndex: Ref<number>,
-) => {
-    const hasTime = computed(() => DATE_TYPE[props.type].hasTime);
+export const useTime = ({
+    props,
+    selectedDates,
+    updateSelectedDates,
+    activeIndex,
+    picker,
+}: {
+    props: CalendarProps;
+    selectedDates: Ref<DateObj[]>;
+    updateSelectedDates: UpdateSelectedDates;
+    activeIndex: Ref<number>;
+    picker: Ref<Picker>;
+}) => {
     const currentTime = ref('');
     watch(
         [selectedDates],
@@ -552,7 +588,7 @@ export const useTime = (
 
     const innerDisabledTime = computed(() => {
         if (!props.disabledTime) return null;
-        if (DATE_TYPE[props.type].isRange) {
+        if (picker.value.isRange) {
             return props.disabledTime(
                 new Date(
                     transformDateToTimestamp(
@@ -574,7 +610,6 @@ export const useTime = (
     return {
         currentTime,
         changeTime,
-        hasTime,
         innerDisabledTime,
     };
 };
diff --git a/components/date-picker/useRange.ts b/components/date-picker/useRange.ts
index bc229d58..e28071a5 100644
--- a/components/date-picker/useRange.ts
+++ b/components/date-picker/useRange.ts
@@ -1,7 +1,8 @@
-import { computed, watch, ref, Ref } from 'vue';
+import { watch, ref, Ref } from 'vue';
 
 import { contrastDate, parseDate, getTimestampFromFormat } from './helper';
-import { DATE_TYPE, SELECTED_STATUS, RANGE_POSITION } from './const';
+import { SELECTED_STATUS, RANGE_POSITION } from './const';
+import { Picker } from './pickerHander';
 
 import type { CalendarsProps } from './calendars.vue';
 
@@ -48,19 +49,25 @@ export const useSelectStatus = (props: CalendarsProps) => {
     };
 };
 
-export const useRange = (
-    props: CalendarsProps,
-    tempCurrentValue: Ref<number[]>,
-    innerDisabledDate: (date: Date, format: string) => boolean | undefined,
-    selectedStatus: Ref<SELECTED_STATUS>,
-    lastSelectedPosition: Ref<RANGE_POSITION>,
-) => {
-    const isDateRange = computed(() => DATE_TYPE[props.type].isRange);
-
+export const useRange = ({
+    props,
+    tempCurrentValue,
+    innerDisabledDate,
+    selectedStatus,
+    lastSelectedPosition,
+    picker,
+}: {
+    props: CalendarsProps;
+    tempCurrentValue: Ref<number[]>;
+    innerDisabledDate: (date: Date, format: string) => boolean | undefined;
+    selectedStatus: Ref<SELECTED_STATUS>;
+    lastSelectedPosition: Ref<RANGE_POSITION>;
+    picker: Ref<Picker>;
+}) => {
     const leftActiveDate = ref(
         getTimestampFromFormat(
             tempCurrentValue.value[0] && new Date(tempCurrentValue.value[0]),
-            props.format,
+            picker.value.format,
         ),
     );
     const endDate = new Date(leftActiveDate.value);
@@ -153,17 +160,13 @@ export const useRange = (
     };
 
     const rangeDiabledDate = (date: Date, format: string) => {
-        if (isDateRange.value) {
-            if (maxRangeDisabled(date, format)) {
-                return true;
-            }
+        if (maxRangeDisabled(date, format)) {
+            return true;
         }
         return innerDisabledDate(date, format);
     };
 
     return {
-        isDateRange,
-
         leftActiveDate,
         rightActiveDate,
         changeCurrentDate,
diff --git a/components/popper/props.ts b/components/popper/props.ts
index 8d3d55ae..a06fe904 100644
--- a/components/popper/props.ts
+++ b/components/popper/props.ts
@@ -46,6 +46,9 @@ export const popperProps = {
         type: Boolean,
         default: true,
     },
+    onlyShowTrigger: {
+        type: Boolean,
+    },
 } as const;
 
 export type PopperProps = Partial<ExtractPropTypes<typeof popperProps>>;
diff --git a/components/popper/useTrigger.ts b/components/popper/useTrigger.ts
index fe95ce72..d5c17738 100644
--- a/components/popper/useTrigger.ts
+++ b/components/popper/useTrigger.ts
@@ -53,7 +53,7 @@ export default function useTrigger(
     };
 
     const toggleState = () => {
-        if (visible.value) {
+        if (visible.value && !props.onlyShowTrigger) {
             hide();
         } else {
             show();
diff --git a/components/time-picker/time-picker.vue b/components/time-picker/time-picker.vue
index 8486daa6..a3f392e0 100644
--- a/components/time-picker/time-picker.vue
+++ b/components/time-picker/time-picker.vue
@@ -78,7 +78,6 @@ import {
     computed,
     PropType,
     ExtractPropTypes,
-    CSSProperties,
     provide,
 } from 'vue';
 import { UPDATE_MODEL_EVENT } from '../_util/constants';
@@ -292,7 +291,6 @@ export default defineComponent({
             }
         });
 
-        // const inputactiveTime
         const handleInput = (val: string) => {
             tempValue.value = val;
         };
diff --git a/docs/.vitepress/components/datePicker/rangeSelect.vue b/docs/.vitepress/components/datePicker/rangeSelect.vue
index 793f124f..39c9eabd 100644
--- a/docs/.vitepress/components/datePicker/rangeSelect.vue
+++ b/docs/.vitepress/components/datePicker/rangeSelect.vue
@@ -7,6 +7,6 @@
         >
             <template #separator> 至 </template>
         </FDatePicker>
-        <FDatePicker type="datetimerange" />
+        <FDatePicker type="datetimerange" clearable />
     </Space>
 </template>