feat: support direct choose date

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx

@@ -43,6 +43,7 @@ const DatePicker: FC<Props> = ({
         renderTrigger={renderDate}
         needTimePicker={false}
         onClear={noop}
+        noConfirm
       />
       <span className='system-sm-regular text-text-tertiary'>-</span>
       <Picker
@@ -51,6 +52,7 @@ const DatePicker: FC<Props> = ({
         renderTrigger={renderDate}
         needTimePicker={false}
         onClear={noop}
+        noConfirm
       />
     </div>
 

web/app/components/base/date-and-time-picker/date-picker/index.tsx

@@ -36,6 +36,7 @@ const DatePicker = ({
   renderTrigger,
   triggerWrapClassName,
   popupZIndexClassname = 'z-[11]',
+  noConfirm,
   getIsDateDisabled,
 }: DatePickerProps) => {
   const { t } = useTranslation()
@@ -121,11 +122,20 @@ const DatePicker = ({
     setCurrentDate(currentDate.clone().subtract(1, 'month'))
   }, [currentDate])
 
+  const handleConfirmDate = (passedInSelectedDate?: Dayjs) => {
+    // passedInSelectedDate may be a click event when noConfirm is false
+    const nextDate = (dayjs.isDayjs(passedInSelectedDate) ? passedInSelectedDate : selectedDate)
+    onChange(nextDate ? nextDate.tz(timezone) : undefined)
+    setIsOpen(false)
+  }
+
   const handleDateSelect = useCallback((day: Dayjs) => {
     const newDate = cloneTime(day, selectedDate || getDateWithTimezone({ timezone }))
     setCurrentDate(newDate)
     setSelectedDate(newDate)
-  }, [selectedDate, timezone])
+    if (noConfirm)
+      handleConfirmDate(newDate)
+  }, [selectedDate, timezone, noConfirm, handleConfirmDate])
 
   const handleSelectCurrentDate = () => {
     const newDate = getDateWithTimezone({ timezone })
@@ -135,12 +145,6 @@ const DatePicker = ({
     setIsOpen(false)
   }
 
-  const handleConfirmDate = () => {
-    // debugger
-    onChange(selectedDate ? selectedDate.tz(timezone) : undefined)
-    setIsOpen(false)
-  }
-
   const handleClickTimePicker = () => {
     if (view === ViewType.date) {
       setView(ViewType.time)
@@ -292,7 +296,7 @@ const DatePicker = ({
 
           {/* Footer */}
           {
-            [ViewType.date, ViewType.time].includes(view) ? (
+            [ViewType.date, ViewType.time].includes(view) && !noConfirm && (
               <DatePickerFooter
                 needTimePicker={needTimePicker}
                 displayTime={displayTime}
@@ -301,7 +305,10 @@ const DatePicker = ({
                 handleSelectCurrentDate={handleSelectCurrentDate}
                 handleConfirmDate={handleConfirmDate}
               />
-            ) : (
+            )
+          }
+          {
+            ![ViewType.date, ViewType.time].includes(view) && (
               <YearAndMonthPickerFooter
                 handleYearMonthCancel={handleYearMonthCancel}
                 handleYearMonthConfirm={handleYearMonthConfirm}

web/app/components/base/date-and-time-picker/types.ts

@@ -30,6 +30,7 @@ export type DatePickerProps = {
   renderTrigger?: (props: TriggerProps) => React.ReactNode
   minuteFilter?: (minutes: string[]) => string[]
   popupZIndexClassname?: string
+  noConfirm?: boolean
   getIsDateDisabled?: (date: Dayjs) => boolean
 }