feat(DatePicker): add needConfirm API for enableTime DatePicker (#4411)

* docs: 📝 update api

* feat(DatePicker): ✨ 增加不需要确认直接保存的能力

* chore: update snapshot

* fix: 🐛 修整needConfirm为true时,input值格式化的问题

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Uyarn <uyarnchen@gmail.com>

src/date-picker/DatePicker.tsx

@@ -61,6 +61,30 @@ export default defineComponent({
     });
 
     watch(popupVisible, (visible) => {
+      // 如果不需要确认，直接保存当前值
+      if (!props.needConfirm && props.enableTimePicker && !visible) {
+        const nextValue = formatDate(inputValue.value, {
+          format: formatRef.value.format,
+        });
+        if (nextValue) {
+          onChange?.(
+            formatDate(inputValue.value, {
+              format: formatRef.value.format,
+              targetFormat: formatRef.value.valueType,
+            }) as DateValue,
+            {
+              dayjsValue: parseToDayjs(inputValue.value as string, formatRef.value.format),
+              trigger: 'confirm',
+            },
+          );
+        } else {
+          inputValue.value = formatDate(value.value, {
+            format: formatRef.value.format,
+          });
+        }
+      }
+
+      // 格式化 input 值
       const dateValue =
         // Date 属性、季度和周不再 parse，避免 dayjs 处理成 Invalid
         value.value && !isDate(value.value) && !['week', 'quarter'].includes(props.mode)
@@ -242,6 +266,7 @@ export default defineComponent({
       enableTimePicker: props.enableTimePicker,
       presetsPlacement: props.presetsPlacement,
       popupVisible: popupVisible.value,
+      needConfirm: props.needConfirm,
       onCellClick,
       onCellMouseEnter,
       onCellMouseLeave,
@@ -269,6 +294,7 @@ export default defineComponent({
           placeholder={props.placeholder || globalConfig.value.placeholder[props.mode]}
           popupVisible={popupVisible.value}
           valueDisplay={() => renderTNodeJSX('valueDisplay', { params: valueDisplayParams.value })}
+          needConfirm={props.needConfirm}
           {...(props.selectInputProps as TdDatePickerProps['selectInputProps'])}
           panel={() => <TSinglePanel {...panelProps.value} />}
         />

src/date-picker/__tests__/__snapshots__/index.test.jsx.snap

@@ -6,6 +6,7 @@ exports[`DatePicker > :mode 1`] = `
 >
   <div
     class="t-select-input t-select-input--empty"
+    needconfirm="true"
   >
     
     <div
@@ -154,6 +155,7 @@ exports[`DatePicker > :value 1`] = `
 >
   <div
     class="t-select-input"
+    needconfirm="true"
   >
     
     <div

src/date-picker/base/Footer.tsx

@@ -8,6 +8,10 @@ export default defineComponent({
     enableTimePicker: Boolean,
     presetsPlacement: String,
     presets: Object,
+    needConfirm: {
+      type: Boolean,
+      default: true,
+    },
     selectedValue: [Date, String, Number],
     onPresetClick: Function,
     onConfirmClick: Function,
@@ -38,7 +42,7 @@ export default defineComponent({
               ))}
           </div>
         }
-        {props.enableTimePicker && (
+        {props.enableTimePicker && props.needConfirm && (
           <TButton
             disabled={!props.selectedValue}
             size="small"

src/date-picker/date-picker.en-US.md

@@ -18,6 +18,7 @@ format | String | 'YYYY-MM-DD' | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
 label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 mode | String | date | options: year/quarter/month/week/date | N
+needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time picker scenario, default is true | N
 placeholder | String / Array | undefined | Typescript：`string` | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
 prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
@@ -57,6 +58,7 @@ preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \-
 name | type | default | description | required
 -- | -- | -- | -- | --
 allowInput | Boolean | false | \- | N
+borderless | Boolean | false | \- | N
 cancelRangeSelectLimit | Boolean | false | The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted. | N
 clearable | Boolean | false | \- | N
 defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N
@@ -67,6 +69,7 @@ firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N
 format | String | - | \- | N
 label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 mode | String | date | options: year/quarter/month/week/date | N
+needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time range picker scenario, default is true | N
 panelPreselection | Boolean | true | \- | N
 placeholder | String / Array | - | Typescript：`string \| Array<string>` | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N

src/date-picker/date-picker.md

@@ -18,6 +18,7 @@ format | String | 'YYYY-MM-DD' | 仅用于格式化日期显示的格式，不
 inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
 label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N
+needConfirm | Boolean | true | 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为`true` | N
 placeholder | String / Array | undefined | 占位符。TS 类型：`string` | N
 popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
 prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
@@ -57,6 +58,7 @@ preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 allowInput | Boolean | false | 是否允许输入日期 | N
+borderless | Boolean | false | 无边框模式 | N
 cancelRangeSelectLimit | Boolean | false | 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 | N
 clearable | Boolean | false | 是否显示清除按钮 | N
 defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | N
@@ -67,6 +69,7 @@ firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/
 format | String | - | 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) | N
 label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N
+needConfirm | Boolean | true | 决定在日期时间区间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为 `true` | N
 panelPreselection | Boolean | true | 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期 | N
 placeholder | String / Array | - | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array<string>` | N
 popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N

src/date-picker/date-range-picker-props.ts

@@ -10,6 +10,8 @@ import { PropType } from 'vue';
 export default {
   /** 是否允许输入日期 */
   allowInput: Boolean,
+  /** 无边框模式 */
+  borderless: Boolean,
   /** 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 */
   cancelRangeSelectLimit: Boolean,
   /** 是否显示清除按钮 */
@@ -56,6 +58,11 @@ export default {
       return ['year', 'quarter', 'month', 'week', 'date'].includes(val);
     },
   },
+  /** 决定在日期时间区间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为 `true` */
+  needConfirm: {
+    type: Boolean,
+    default: true,
+  },
   /** 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期 */
   panelPreselection: {
     type: Boolean,

src/date-picker/panel/ExtraContent.tsx

@@ -8,12 +8,14 @@ export default defineComponent({
     presets: Object as PropType<TdDatePickerProps['presets'] | TdDateRangePickerProps['presets']>,
     enableTimePicker: Boolean as PropType<TdDatePickerProps['enableTimePicker']>,
     presetsPlacement: String as PropType<TdDatePickerProps['presetsPlacement']>,
+    needConfirm: { type: Boolean, default: true },
     onPresetClick: Function,
     onConfirmClick: Function,
     selectedValue: [String, Number, Array, Date] as PropType<TdDatePickerProps['value']>,
   },
   setup(props) {
-    const showPanelFooter = computed(() => props.enableTimePicker || props.presets);
+    // 默认为 true
+    const showPanelFooter = computed(() => (props.enableTimePicker && props.needConfirm) || props.presets);
 
     return () =>
       showPanelFooter.value ? (
@@ -24,6 +26,7 @@ export default defineComponent({
           onConfirmClick={props.onConfirmClick}
           presetsPlacement={props.presetsPlacement}
           selectedValue={props.selectedValue}
+          needConfirm={props.needConfirm}
         />
       ) : null;
   },

src/date-picker/panel/SinglePanel.tsx

@@ -29,6 +29,10 @@ export default defineComponent({
     month: Number,
     time: String,
     popupVisible: Boolean,
+    needConfirm: {
+      type: Boolean,
+      default: true,
+    },
     onPanelClick: Function,
     onCellClick: Function,
     onCellMouseEnter: Function,
@@ -101,6 +105,7 @@ export default defineComponent({
       onPresetClick: props.onPresetClick,
       onConfirmClick: props.onConfirmClick,
       selectedValue: props.value,
+      needConfirm: props.needConfirm,
     }));
 
     return () => (

src/date-picker/props.ts

@@ -60,6 +60,11 @@ export default {
       return ['year', 'quarter', 'month', 'week', 'date'].includes(val);
     },
   },
+  /** 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为`true` */
+  needConfirm: {
+    type: Boolean,
+    default: true,
+  },
   /** 占位符 */
   placeholder: {
     type: [String, Array] as PropType<TdDatePickerProps['placeholder']>,

src/date-picker/type.ts

@@ -67,6 +67,11 @@ export interface TdDatePickerProps {
    * @default date
    */
   mode?: 'year' | 'quarter' | 'month' | 'week' | 'date';
+  /**
+   * 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为`true`
+   * @default true
+   */
+  needConfirm?: boolean;
   /**
    * 占位符
    */
@@ -221,6 +226,11 @@ export interface TdDateRangePickerProps {
    * @default date
    */
   mode?: 'year' | 'quarter' | 'month' | 'week' | 'date';
+  /**
+   * 决定在日期时间区间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为 `true`
+   * @default true
+   */
+  needConfirm?: boolean;
   /**
    * 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期
    * @default true