81 lines
1.7 KiB
TypeScript
81 lines
1.7 KiB
TypeScript
import DateTimePicker from "@react-native-community/datetimepicker";
|
|
import { useRouter } from "expo-router";
|
|
import React, { useState } from "react";
|
|
import {
|
|
Button,
|
|
Platform,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
} from "react-native";
|
|
|
|
export default function SimpleForm() {
|
|
const router = useRouter();
|
|
const [name, setName] = useState("");
|
|
const [date, setDate] = useState(new Date());
|
|
const [showPicker, setShowPicker] = useState(false);
|
|
|
|
const onChangeDate = (event, selectedDate) => {
|
|
setShowPicker(Platform.OS === "ios");
|
|
if (selectedDate) {
|
|
setDate(selectedDate);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
alert(`Name: ${name}\nDate: ${date.toDateString()}`);
|
|
router.push("/");
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.label}>Name:</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Enter your name"
|
|
value={name}
|
|
onChangeText={setName}
|
|
/>
|
|
|
|
<Text style={styles.label}>Date:</Text>
|
|
<Button title="Select Date" onPress={() => setShowPicker(true)} />
|
|
|
|
<Text style={styles.dateText}>{date.toDateString()}</Text>
|
|
|
|
{showPicker && (
|
|
<DateTimePicker
|
|
value={date}
|
|
mode="date"
|
|
display="default"
|
|
onChange={onChangeDate}
|
|
/>
|
|
)}
|
|
|
|
<Button title="Submit" onPress={handleSubmit} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 20,
|
|
marginTop: 50,
|
|
},
|
|
label: {
|
|
fontSize: 16,
|
|
marginBottom: 5,
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderColor: "#ccc",
|
|
padding: 10,
|
|
marginBottom: 15,
|
|
borderRadius: 5,
|
|
},
|
|
dateText: {
|
|
marginVertical: 10,
|
|
fontSize: 16,
|
|
},
|
|
});
|