diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
index 51452a4e0b..2bfdece433 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
@@ -9,6 +9,7 @@ import { useI18N } from '@/context/i18n'
 import Picker from '@/app/components/base/date-and-time-picker/date-picker'
 import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
 import { noop } from 'lodash-es'
+import dayjs from 'dayjs'
 
 type Props = {
   start: Dayjs
@@ -17,6 +18,7 @@ type Props = {
   onEndChange: (date?: Dayjs) => void
 }
 
+const today = dayjs()
 const DatePicker: FC<Props> = ({
   start,
   end,
@@ -32,6 +34,21 @@ const DatePicker: FC<Props> = ({
       </div>
     )
   }, [locale])
+
+  const availableStartDate = end.subtract(30, 'day')
+  const startDateDisabled = useCallback((date: Dayjs) => {
+    if (date.isAfter(today, 'date'))
+      return true
+    return !((date.isAfter(availableStartDate, 'date') || date.isSame(availableStartDate, 'date')) && (date.isBefore(end, 'date') || date.isSame(end, 'date')))
+  }, [availableStartDate, end])
+
+  const availableEndDate = start.add(30, 'day')
+  const endDateDisabled = useCallback((date: Dayjs) => {
+    if (date.isAfter(today, 'date'))
+      return true
+    return !((date.isAfter(start, 'date') || date.isSame(start, 'date')) && (date.isBefore(availableEndDate, 'date') || date.isSame(availableEndDate, 'date')))
+  }, [availableEndDate, start])
+
   return (
     <div className='flex h-8 items-center space-x-0.5 rounded-lg bg-components-input-bg-normal px-2'>
       <div className='p-px'>
@@ -44,6 +61,7 @@ const DatePicker: FC<Props> = ({
         needTimePicker={false}
         onClear={noop}
         noConfirm
+        getIsDateDisabled={startDateDisabled}
       />
       <span className='system-sm-regular text-text-tertiary'>-</span>
       <Picker
@@ -53,6 +71,7 @@ const DatePicker: FC<Props> = ({
         needTimePicker={false}
         onClear={noop}
         noConfirm
+        getIsDateDisabled={endDateDisabled}
       />
     </div>