无法弄清RNDateTimePicker的使用

问题描述 投票:0回答:1

我正在尝试创建一个移动应用程序,该应用程序包含一个获取出生日期的字段。不幸的是DateTimePicker module没有给我输出。正如它说的很旧,我用过

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

在我的实现中。它显示了日期时间选择器,但我无法将其输出输入文本字段。如果您能为我提供有关如何使用RNDateTimePicker的示例,我将不胜感激。以下是我正在使用的代码。

    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"
    },
});
reactjs react-native datetimepicker
1个回答
0
投票

您应该在date中放置一个state值,以便您可以使用事件处理程序对其进行更新并将其传递给RNDateTimePicker组件。

然后在setDate()功能中,处理事件并用所选值更新this.state.date

例如:

© www.soinside.com 2019 - 2024. All rights reserved.