matiru

 1import { useState, useEffect } from "react";
 2import { Platform, Text, TouchableOpacity, View } from "react-native";
 3import DateTimePicker from "@react-native-community/datetimepicker";
 4import styles, { colors } from "../styles";
 5
 6export default function DatePicker({ label, value, onChange }) {
 7  const [show, setShow] = useState(false);
 8  const [selected, setSelected] = useState(value ? new Date(value) : null);
 9
10  useEffect(() => {
11    if (!value) setSelected(null);
12  }, [value]);
13
14  const handleChange = (event, selectedDate) => {
15    setShow(false);
16    if (event.type === "dismissed") return;
17
18    if (selectedDate) {
19      setSelected(selectedDate);
20      const formatted = selectedDate.toISOString().split("T")[0];
21      onChange(formatted);
22    }
23  };
24
25  return (
26    <View style={{ marginVertical: 8 }}>
27      {label && (
28        <Text
29          style={{
30            color: colors.gray,
31            marginBottom: 4,
32            fontWeight: "600",
33            fontSize: 16,
34          }}
35        >
36          {label}
37        </Text>
38      )}
39
40      <TouchableOpacity
41        onPress={() => setShow(true)}
42        style={[
43          styles.input,
44          {
45            justifyContent: "center",
46            backgroundColor: "white",
47          },
48        ]}
49      >
50        <Text
51          style={{
52            fontSize: 16,
53            color: selected ? colors.gray : "#999",
54          }}
55        >
56          {selected ? `${selected.toISOString().split("T")[0]}` : "Select Date"}
57        </Text>
58      </TouchableOpacity>
59
60      {show && (
61        <DateTimePicker
62          value={selected || new Date()}
63          mode="date"
64          display={Platform.OS === "ios" ? "spinner" : "default"}
65          onChange={handleChange}
66          minimumDate={new Date()}
67          accentColor={colors.darkGreen}
68        />
69      )}
70    </View>
71  );
72}