Cant figure out the use of RNDateTimePicker

Question

I'm trying to create a mobile application which consists of a field to get date of birth. Unfortunately DateTimePicker module wasn't give me an output. As it says is old I have used

<RNDateTimePicker mode="date" value={new Date()} />

in my implementation. It shows the date time picker but I cant get its output in to the text field. I would highly appriciate if you can provide me with an example on how to use RNDateTimePicker. Following is the code i'm working with.

    import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, Image } from 'react-native';
import RNDateTimePicker from '@react-native-community/datetimepicker';

export default class RegistrationForm extends React.Component {
    render() {
        return (
            <View style={styles.reg_form}>
                <TextInput style={styles.textinput} placeholder="Name you want us to call you" underlineColorAndroid={'transparent'} />
                {/* Field to put DOB */}
                <TextInput style={styles.textinput} placeholder="Date of birth" underlineColorAndroid={'transparent'} />
                {/* RNDateTimePicker */}
                <RNDateTimePicker mode="date" value={new Date()} />
                {/* need to populate the output of this datetimepicker in DOB inputText */}
                <TextInput style={styles.textinput} placeholder="email address" underlineColorAndroid={'transparent'} autoCompleteType="email" />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    reg_form: {
        flex: 1,
        alignSelf: 'stretch',
        paddingLeft: 50,
        paddingRight: 50,
        backgroundColor: '#fff',
        paddingTop: 100,
    },
    textinput: {
        alignSelf: 'stretch',
        height: 40,
        marginBottom: 20,
        borderColor: "#5d5959",
        borderBottomWidth: 1,
        color: "#5d5959"
    },
});

Answer 1

You'll need to import moment then youll need a var for the initial value

and a little function for the value change

Hope this works 4 u

import moment from 'moment';   

 export default class RegistrationForm extends React.Component {

constructor(props) {
    super(props);
    this.state = {
      initialValue: new Date(2000, 10, 11),
    };
  }
    render() {
       const {
         initialValue,
            } = this.state;
      const onChange = (event, selectedDate) => {
         const currentDate = selectedDate || date;
         setShow(Platform.OS === 'ios');
         setDate(currentDate);
         };
        return (
            <View style={styles.reg_form}>
                <TextInput style={styles.textinput} placeholder="Name you want us to call you" underlineColorAndroid={'transparent'} />
                {/* Field to put DOB */}
                <TextInput style={styles.textinput} placeholder="Date of birth" underlineColorAndroid={'transparent'} />
                {/* RNDateTimePicker */}
                mode="date"
              textColor="orange"
              value={initialValue}
              display="default"
              style={{width: width / 6, height: 40}}
              onChange={(event, value) => {
                this.setState({
                  initialValue: value,
                });
                //console.log(moment(value).format('MM/DD/YYYY'));
              }}
                {/* need to populate the output of this datetimepicker in DOB inputText */}
                <TextInput style={styles.textinput} placeholder="email address" underlineColorAndroid={'transparent'} autoCompleteType="email" />
            </View>
        );
    }
}

Answer 2

You should put a date value in your state so that you can update it with an event handler and pass it to the RNDateTimePicker component.

Then in the setDate() function, you handle the event and update this.state.date with the selected value.

For example:

export default class RegistrationForm extends React.Component {
    state = {
       date: new Date()
    }

    setDate = (event, date) => {
       date = date || this.state.date;

       this.setState({
          date
       });
    }

    render() {
        return (
            <View style={styles.reg_form}>
                <TextInput style={styles.textinput} placeholder="Name you want us to call you" underlineColorAndroid={'transparent'} />
                {/* Field to put DOB */}
                <TextInput style={styles.textinput} placeholder="Date of birth" underlineColorAndroid={'transparent'} value={this.state.date} />
                {/* RNDateTimePicker */}
                <RNDateTimePicker mode="date" value={this.state.date} onChange={this.setDate} />
                {/* need to populate the output of this datetimepicker in DOB inputText */}
                <TextInput style={styles.textinput} placeholder="email address" underlineColorAndroid={'transparent'} autoCompleteType="email" />
            </View>
        );
    }
}