From 2fd614fd640f1f2f50c6f345b60e58bcccf27ca7 Mon Sep 17 00:00:00 2001
From: Katherine <katherine_15995@163.com>
Date: Sat, 28 Dec 2024 21:28:46 +0800
Subject: [PATCH] fix:  date range picker in filter form/action not showing
 time picker when showTime=true is set (#5956)

---
 .../antd/date-picker/DatePicker.tsx           | 28 ++++++++++---------
 packages/core/utils/src/date.ts               | 10 +++++++
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx b/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx
index 79a43eafa0..68e2b43bc7 100644
--- a/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx
+++ b/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx
@@ -12,7 +12,7 @@ import { DatePicker as AntdDatePicker, DatePickerProps as AntdDatePickerProps, S
 import { RangePickerProps } from 'antd/es/date-picker';
 import dayjs from 'dayjs';
 import React, { useState, useEffect, useRef } from 'react';
-import { getPickerFormat } from '@nocobase/utils/client';
+import { getPickerFormat, getDateTimeFormat } from '@nocobase/utils/client';
 import { useTranslation } from 'react-i18next';
 import { ReadPretty, ReadPrettyComposed } from './ReadPretty';
 import { getDateRanges, mapDatePicker, mapRangePicker, inferPickerType } from './util';
@@ -167,7 +167,7 @@ export const DatePicker: ComposedDatePicker = (props: any) => {
 DatePicker.ReadPretty = ReadPretty.DatePicker;
 
 DatePicker.RangePicker = function RangePicker(props: any) {
-  const { value, picker = 'date', format } = props;
+  const { value, picker = 'date', format, showTime, timeFormat } = props;
   const { t } = useTranslation();
   const fieldSchema = useFieldSchema();
   const field: any = useField();
@@ -198,14 +198,14 @@ DatePicker.RangePicker = function RangePicker(props: any) {
   ];
 
   const targetPicker = value ? inferPickerType(value?.[0]) : picker;
-  const targetFormat = getPickerFormat(targetPicker) || format;
+  const targetDateFormat = getPickerFormat(targetPicker) || format;
   const newProps: any = {
     utc,
     presets,
     ...props,
-    format: targetFormat,
+    format: getDateTimeFormat(targetPicker, targetDateFormat, showTime, timeFormat),
     picker: targetPicker,
-    showTime: props.showTime ? { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('00:00:00', 'HH:mm:ss')] } : false,
+    showTime: showTime ? { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('00:00:00', 'HH:mm:ss')] } : false,
   };
   const [stateProps, setStateProps] = useState(newProps);
 
@@ -240,17 +240,18 @@ DatePicker.RangePicker = function RangePicker(props: any) {
           ])}
           onChange={(value) => {
             const format = getPickerFormat(value);
+            const dateTimeFormat = getDateTimeFormat(value, format, showTime, timeFormat);
             field.setComponentProps({
               picker: value,
               format,
             });
             newProps.picker = value;
-            newProps.format = format;
+            newProps.format = dateTimeFormat;
             setStateProps(newProps);
             fieldSchema['x-component-props'] = {
               ...props,
               picker: value,
-              format,
+              format: dateTimeFormat,
             };
             field.value = undefined;
           }}
@@ -263,19 +264,19 @@ DatePicker.RangePicker = function RangePicker(props: any) {
 };
 
 DatePicker.FilterWithPicker = function FilterWithPicker(props: any) {
-  const { picker = 'date', format } = props;
+  const { picker = 'date', format, showTime, timeFormat } = props;
   const { utc = true } = useDatePickerContext();
   const value = Array.isArray(props.value) ? props.value[0] : props.value;
   const compile = useCompile();
   const fieldSchema = useFieldSchema();
   const targetPicker = value ? inferPickerType(value) : picker;
-  const targetFormat = getPickerFormat(targetPicker) || format;
+  const targetDateFormat = getPickerFormat(targetPicker) || format;
   const newProps = {
     utc,
     ...props,
     underFilter: true,
-    showTime: props.showTime ? { defaultValue: dayjs('00:00:00', 'HH:mm:ss') } : false,
-    format: targetFormat,
+    showTime: showTime ? { defaultValue: dayjs('00:00:00', 'HH:mm:ss') } : false,
+    format: getDateTimeFormat(targetPicker, targetDateFormat, showTime, timeFormat),
     picker: targetPicker,
     onChange: (val) => {
       props.onChange(undefined);
@@ -316,17 +317,18 @@ DatePicker.FilterWithPicker = function FilterWithPicker(props: any) {
         ])}
         onChange={(value) => {
           const format = getPickerFormat(value);
+          const dateTimeFormat = getDateTimeFormat(value, format, showTime, timeFormat);
           field.setComponentProps({
             picker: value,
             format,
           });
           newProps.picker = value;
-          newProps.format = format;
+          newProps.format = dateTimeFormat;
           setStateProps(newProps);
           fieldSchema['x-component-props'] = {
             ...props,
             picker: value,
-            format,
+            format: dateTimeFormat,
           };
           field.value = null;
         }}
diff --git a/packages/core/utils/src/date.ts b/packages/core/utils/src/date.ts
index a4aa48ff82..f6d9a80cbc 100644
--- a/packages/core/utils/src/date.ts
+++ b/packages/core/utils/src/date.ts
@@ -225,3 +225,13 @@ export const getPickerFormat = (picker) => {
       return 'YYYY-MM-DD';
   }
 };
+
+export const getDateTimeFormat = (picker, format, showTime, timeFormat) => {
+  if (picker === 'date') {
+    if (showTime) {
+      return format + timeFormat || 'HH:mm:ss';
+    }
+    return format;
+  }
+  return format;
+};