修改日历组件

src/components/TimeSelector/TimeSelector.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { View, Text, } from '@tarojs/components'
 import { getDate, getTime, getDateStr, getEndTime } from '@/utils/timeUtils'
-import DialogCalendarCard from '@/components/CalendarCard/DialogCalendarCard'
+import { DialogCalendarCard } from '@/components/index'
 import './TimeSelector.scss'
+import dayjs from 'dayjs'
 
 export interface TimeRange {
   start_time: string
@@ -23,12 +24,38 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
 }) => {
   // 格式化日期显示
   const [visible, setVisible] = useState(false)
+  const [currentTimeValue, setCurrentTimeValue] = useState<Date>(new Date())
+  const [currentTimeType, setCurrentTimeType] = useState<'start' | 'end'>('start')
+  const [showEndTime, setShowEndTime] = useState(false)
   const handleConfirm = (date: Date) => {
     console.log('选择的日期:', date)
-    const start_time = getDateStr(date)
-    const end_time = getEndTime(start_time)
+    const start_time = currentTimeType === 'start' ? getDateStr(date) : value.start_time;
+    const isLater = dayjs(value.start_time).isAfter(dayjs(value.end_time));
+    if (isLater) {
+      if (onChange) onChange({start_time, end_time: getEndTime(start_time)})
+      return
+    }
+    const initEndTime = value.end_time ? value.end_time : getEndTime(start_time)
+    const end_time = currentTimeType === 'end' ? getDateStr(date) : initEndTime;
     if (onChange) onChange({start_time, end_time})
   }
+  const openPicker = (type: 'start' | 'end') => {
+    setCurrentTimeValue(type === 'start' ? new Date(value.start_time) : new Date(value.end_time))
+    setCurrentTimeType(type)
+    setVisible(true)
+  }
+
+  useEffect(() => {
+    if (value.start_time && value.end_time) {
+      const start_time = dayjs(value.start_time).format('YYYY-MM-DD')
+      const end_time = dayjs(value.end_time).format('YYYY-MM-DD')
+      if (start_time === end_time) {
+        setShowEndTime(false)
+      } else {
+        setShowEndTime(true)
+      } 
+    }
+  }, [value])
   return (
     <View className='time-selector'>
       <View className='time-section'>
@@ -37,7 +64,7 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
           <View className='time-label'>
             <View className='dot'></View>
           </View>
-          <View className='time-content' onClick={() => setVisible(true)}>
+          <View className='time-content' onClick={() => openPicker('start')}>
             <Text className='time-label'>开始时间</Text>
             <view className='time-text-wrapper'>
               <Text className='time-text'>{getDate(value.start_time)}</Text>
@@ -51,9 +78,10 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
           <View className='time-label'>
             <View className='dot hollow'></View>
           </View>
-          <View className='time-content'>
+          <View className='time-content' onClick={() => openPicker('end')}>
             <Text className='time-label'>结束时间</Text>
             <view className='time-text-wrapper'>
+              {showEndTime && (<Text className='time-text'>{getDate(value.end_time)}</Text>)}
               <Text className='time-text time-am'>{getTime(value.end_time)}</Text>
             </view>
           </View>
@@ -61,6 +89,7 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
       </View>
       <DialogCalendarCard
               visible={visible}
+              value={currentTimeValue}
               onChange={handleConfirm}
               onClose={() => setVisible(false)}
       />