update tab diary
This commit is contained in:
243
components/diary/DateRangePicker.tsx
Normal file
243
components/diary/DateRangePicker.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
Platform,
|
||||
Modal,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import DateTimePicker from "@react-native-community/datetimepicker";
|
||||
|
||||
interface DateRangePickerProps {
|
||||
startDate: Date | null;
|
||||
endDate: Date | null;
|
||||
onStartDateChange: (date: Date | null) => void;
|
||||
onEndDateChange: (date: Date | null) => void;
|
||||
}
|
||||
|
||||
export default function DateRangePicker({
|
||||
startDate,
|
||||
endDate,
|
||||
onStartDateChange,
|
||||
onEndDateChange,
|
||||
}: DateRangePickerProps) {
|
||||
const [showStartPicker, setShowStartPicker] = useState(false);
|
||||
const [showEndPicker, setShowEndPicker] = useState(false);
|
||||
|
||||
const formatDate = (date: Date | null) => {
|
||||
if (!date) return "";
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
const year = date.getFullYear();
|
||||
return `${day}/${month}/${year}`;
|
||||
};
|
||||
|
||||
const handleStartDateChange = (event: any, selectedDate?: Date) => {
|
||||
setShowStartPicker(Platform.OS === "ios");
|
||||
if (selectedDate) {
|
||||
onStartDateChange(selectedDate);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEndDateChange = (event: any, selectedDate?: Date) => {
|
||||
setShowEndPicker(Platform.OS === "ios");
|
||||
if (selectedDate) {
|
||||
onEndDateChange(selectedDate);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.label}>Ngày đi</Text>
|
||||
<View style={styles.dateRangeContainer}>
|
||||
{/* Start Date */}
|
||||
<TouchableOpacity
|
||||
style={styles.dateInput}
|
||||
onPress={() => setShowStartPicker(true)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={[styles.dateText, !startDate && styles.placeholder]}>
|
||||
{startDate ? formatDate(startDate) : "Ngày bắt đầu"}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Ionicons
|
||||
name="arrow-forward"
|
||||
size={20}
|
||||
color="#9CA3AF"
|
||||
style={styles.arrow}
|
||||
/>
|
||||
|
||||
{/* End Date */}
|
||||
<TouchableOpacity
|
||||
style={styles.dateInput}
|
||||
onPress={() => setShowEndPicker(true)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={[styles.dateText, !endDate && styles.placeholder]}>
|
||||
{endDate ? formatDate(endDate) : "Ngày kết thúc"}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.calendarButton}
|
||||
onPress={() => setShowStartPicker(true)}
|
||||
>
|
||||
<Ionicons name="calendar-outline" size={20} color="#6B7280" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Start Date Picker */}
|
||||
{showStartPicker && (
|
||||
<Modal transparent animationType="fade" visible={showStartPicker}>
|
||||
<View style={styles.modalOverlay}>
|
||||
<View style={styles.pickerContainer}>
|
||||
<View style={styles.pickerHeader}>
|
||||
<TouchableOpacity onPress={() => setShowStartPicker(false)}>
|
||||
<Text style={styles.cancelButton}>Hủy</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.pickerTitle}>Chọn ngày bắt đầu</Text>
|
||||
<TouchableOpacity onPress={() => setShowStartPicker(false)}>
|
||||
<Text style={styles.doneButton}>Xong</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<DateTimePicker
|
||||
value={startDate || new Date()}
|
||||
mode="date"
|
||||
display={Platform.OS === "ios" ? "spinner" : "default"}
|
||||
onChange={handleStartDateChange}
|
||||
maximumDate={endDate || undefined}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{/* End Date Picker */}
|
||||
{showEndPicker && (
|
||||
<Modal transparent animationType="fade" visible={showEndPicker}>
|
||||
<View style={styles.modalOverlay}>
|
||||
<View style={styles.pickerContainer}>
|
||||
<View style={styles.pickerHeader}>
|
||||
<TouchableOpacity onPress={() => setShowEndPicker(false)}>
|
||||
<Text style={styles.cancelButton}>Hủy</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.pickerTitle}>Chọn ngày kết thúc</Text>
|
||||
<TouchableOpacity onPress={() => setShowEndPicker(false)}>
|
||||
<Text style={styles.doneButton}>Xong</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<DateTimePicker
|
||||
value={endDate || new Date()}
|
||||
mode="date"
|
||||
display={Platform.OS === "ios" ? "spinner" : "default"}
|
||||
onChange={handleEndDateChange}
|
||||
minimumDate={startDate || undefined}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
label: {
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
color: "#111827",
|
||||
marginBottom: 8,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
dateRangeContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
},
|
||||
dateInput: {
|
||||
flex: 1,
|
||||
backgroundColor: "#FFFFFF",
|
||||
borderWidth: 1,
|
||||
borderColor: "#D1D5DB",
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
dateText: {
|
||||
fontSize: 16,
|
||||
color: "#111827",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
placeholder: {
|
||||
color: "#9CA3AF",
|
||||
},
|
||||
arrow: {
|
||||
marginHorizontal: 4,
|
||||
},
|
||||
calendarButton: {
|
||||
padding: 8,
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
justifyContent: "flex-end",
|
||||
},
|
||||
pickerContainer: {
|
||||
backgroundColor: "#FFFFFF",
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
paddingBottom: 20,
|
||||
},
|
||||
pickerHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#F3F4F6",
|
||||
},
|
||||
pickerTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
color: "#111827",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
cancelButton: {
|
||||
fontSize: 16,
|
||||
color: "#6B7280",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
doneButton: {
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
color: "#3B82F6",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user