React Native Date Picker

gistfile1.txt

import React, { useState } from 'react';
import { View, TouchableOpacity, TextInput, Text } from 'react-native';
import DatePicker from 'react-native-date-picker';
import moment from 'moment';

export default function DatePickerField({ }) {
    const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
    const [birthDate, setBirthDate] = useState('');

    const showDatePicker = () => setDatePickerVisibility(true);
    const hideDatePicker = () => setDatePickerVisibility(false);

    return (
        <View style={styles.container}>
            <Text>Date of Birth</Text>
            <TouchableOpacity onPress={showDatePicker}>
                <TextInput
                    numberOfLines={1}
                    editable={false}
                    placeholder="📅 Select Birthdate"
                    value={birthDate ? moment(birthDate).format('DD MMMM, YYYY') : ''}
                    style={styles.input}
                />
                <DatePicker
                    modal
                    open={isDatePickerVisible}
                    date={birthDate ? new Date(birthDate) : new Date()}
                    onConfirm={(date) => {
                        console.log(date)
                        hideDatePicker();
                        setBirthDate(date);
                    }}
                    onCancel={hideDatePicker}
                    mode="time"
                />
            </TouchableOpacity>
        </View>
    );
}

const styles = {
    input: {
        borderWidth: 1,
        borderColor: 'lightgray',
        fontSize: 16,
        marginBottom: 10,
        borderRadius: 10
    },
    title: {
        color: 'purple',
        fontWeight: 'bold',
        marginBottom: 5,
    },
    container: {
        margin: 20
    }
};