71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Pressable, Text, StyleSheet } from "react-native";
|
|
import DateTimePicker, { Event } from "@react-native-community/datetimepicker";
|
|
|
|
type Props = {
|
|
value?: Date;
|
|
mode?: "date" | "time" | "datetime";
|
|
onChange: (date: Date) => void;
|
|
};
|
|
|
|
const DateTimePickerTry: React.FC<Props> = ({
|
|
value = new Date(),
|
|
mode = "date",
|
|
onChange,
|
|
}) => {
|
|
const [show, setShow] = useState(false);
|
|
|
|
const toggleDatePicker = () => {
|
|
setShow(!show);
|
|
};
|
|
|
|
const handleConfirm = (event: Event, selectedDate?: Date) => {
|
|
if (event.type === "set" && selectedDate !== undefined) {
|
|
onChange(selectedDate);
|
|
}
|
|
setShow(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Pressable onPress={toggleDatePicker} style={styles.button}>
|
|
<Text style={styles.buttonText}>
|
|
{value ? value.toLocaleDateString() : "Pilih tanggal"}
|
|
</Text>
|
|
</Pressable>
|
|
|
|
{show && (
|
|
<DateTimePicker
|
|
// style={styles.button}
|
|
textColor="white"
|
|
testID="dateTimePicker"
|
|
value={value}
|
|
mode={mode}
|
|
is24Hour={true}
|
|
display="default"
|
|
onChange={handleConfirm as any}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 20,
|
|
backgroundColor: "white",
|
|
borderRadius: 8,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginVertical: 10,
|
|
},
|
|
buttonText: {
|
|
color: "white",
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
},
|
|
});
|
|
|
|
export default DateTimePickerTry;
|