Cập nhật API thêm trip (validate)

components/diary/addTripModal/TripDurationPicker.tsx

@@ -29,6 +29,10 @@ export default function TripDurationPicker({
   const { colors, colorScheme } = useThemeContext();
   const [showStartPicker, setShowStartPicker] = useState(false);
   const [showEndPicker, setShowEndPicker] = useState(false);
+  
+  // Temp states to hold the picker value before confirming
+  const [tempStartDate, setTempStartDate] = useState<Date>(new Date());
+  const [tempEndDate, setTempEndDate] = useState<Date>(new Date());
 
   const formatDate = (date: Date | null) => {
     if (!date) return "";
@@ -38,20 +42,64 @@ export default function TripDurationPicker({
     return `${day}/${month}/${year}`;
   };
 
+  const handleOpenStartPicker = () => {
+    const today = new Date();
+    const dateToUse = startDate || today;
+    // If no date selected, immediately set to today
+    if (!startDate) {
+      onStartDateChange(today);
+    }
+    // Always set tempStartDate to the date we're using (today if no date was selected)
+    setTempStartDate(dateToUse);
+    setShowStartPicker(true);
+  };
+
+  const handleOpenEndPicker = () => {
+    const today = new Date();
+    const dateToUse = endDate || today;
+    // If no date selected, immediately set to today
+    if (!endDate) {
+      onEndDateChange(today);
+    }
+    // Always set tempEndDate to the date we're using (today if no date was selected)
+    setTempEndDate(dateToUse);
+    setShowEndPicker(true);
+  };
+
   const handleStartDateChange = (event: any, selectedDate?: Date) => {
-    setShowStartPicker(Platform.OS === "ios");
-    if (selectedDate) {
+    if (Platform.OS === "android") {
+      setShowStartPicker(false);
+      if (event.type === "set" && selectedDate) {
+        onStartDateChange(selectedDate);
+      }
+    } else if (selectedDate) {
+      // For iOS, update both temp and actual date immediately
+      setTempStartDate(selectedDate);
       onStartDateChange(selectedDate);
     }
   };
 
   const handleEndDateChange = (event: any, selectedDate?: Date) => {
-    setShowEndPicker(Platform.OS === "ios");
-    if (selectedDate) {
+    if (Platform.OS === "android") {
+      setShowEndPicker(false);
+      if (event.type === "set" && selectedDate) {
+        onEndDateChange(selectedDate);
+      }
+    } else if (selectedDate) {
+      // For iOS, update both temp and actual date immediately
+      setTempEndDate(selectedDate);
       onEndDateChange(selectedDate);
     }
   };
 
+  const handleConfirmStartDate = () => {
+    setShowStartPicker(false);
+  };
+
+  const handleConfirmEndDate = () => {
+    setShowEndPicker(false);
+  };
+
   const themedStyles = {
     label: { color: colors.text },
     dateInput: {
@@ -79,7 +127,7 @@ export default function TripDurationPicker({
           </Text>
           <TouchableOpacity
             style={[styles.dateInput, themedStyles.dateInput]}
-            onPress={() => setShowStartPicker(true)}
+            onPress={handleOpenStartPicker}
             activeOpacity={0.7}
           >
             <Text
@@ -106,7 +154,7 @@ export default function TripDurationPicker({
           </Text>
           <TouchableOpacity
             style={[styles.dateInput, themedStyles.dateInput]}
-            onPress={() => setShowEndPicker(true)}
+            onPress={handleOpenEndPicker}
             activeOpacity={0.7}
           >
             <Text
@@ -141,12 +189,12 @@ export default function TripDurationPicker({
                 <Text style={[styles.pickerTitle, themedStyles.pickerTitle]}>
                   {t("diary.selectStartDate")}
                 </Text>
-                <TouchableOpacity onPress={() => setShowStartPicker(false)}>
+                <TouchableOpacity onPress={handleConfirmStartDate}>
                   <Text style={styles.doneButton}>{t("common.done")}</Text>
                 </TouchableOpacity>
               </View>
               <DateTimePicker
-                value={startDate || new Date()}
+                value={tempStartDate}
                 mode="date"
                 display={Platform.OS === "ios" ? "spinner" : "default"}
                 onChange={handleStartDateChange}
@@ -173,12 +221,12 @@ export default function TripDurationPicker({
                 <Text style={[styles.pickerTitle, themedStyles.pickerTitle]}>
                   {t("diary.selectEndDate")}
                 </Text>
-                <TouchableOpacity onPress={() => setShowEndPicker(false)}>
+                <TouchableOpacity onPress={handleConfirmEndDate}>
                   <Text style={styles.doneButton}>{t("common.done")}</Text>
                 </TouchableOpacity>
               </View>
               <DateTimePicker
-                value={endDate || new Date()}
+                value={tempEndDate}
                 mode="date"
                 display={Platform.OS === "ios" ? "spinner" : "default"}
                 onChange={handleEndDateChange}