How to use react-native-modal-datetime-picker to take multiple timings and display it

Refresh

1 weeks ago

Views

5 time

0

I have started learning react-native and I am using the react-native-modal-datetime-picker first time. I tried to take multiple timings from timePicker but I am not getting how to do it. I want to take 5 different timings for my app also I have to display it. following is my code for you to understand my requirement.

    _showDateTimePicker = () => {
            this.setState({ isDateTimePickerVisible: true })
        }

     _hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });

 _handleDatePicked = (time) => {
        const selected1 = time.getHours() + ':' + time.getMinutes();
        this.setState({ value1: selected1 })
        this._hideDateTimePicker();
    };

render() {
        return (
            <ScrollView style={styles.container}>

                <View style={styles.dataStyle}>
                    <Text style={styles.textStyle}>valu1 </Text>
                    <Text style={styles.textStyle2}> {this.state.selected1} </Text>
                    <TouchableOpacity style={styles.iconStyle}>
                        <Icon name='edit' color='#212B51' size={25} onPress={this.renderDateTimeModals} />
                    </TouchableOpacity>
                </View>
                <View style={styles.dataStyle}>
                    <Text style={styles.textStyle}>Value2 </Text>
                    <Text style={styles.textStyle2}> {this.state.selected2} </Text>
                    <TouchableOpacity style={styles.iconStyle}>
                        <Icon name='edit' color='#212B51' size={25} onPress={this._showDateTimePicker} />
                    </TouchableOpacity>
                </View>
                <View style={styles.dataStyle}>
                    <Text style={styles.textStyle}>Value3 </Text>
                    <Text style={styles.textStyle2}> {this.state.selected3} </Text>
                    <TouchableOpacity style={styles.iconStyle}>
                        <Icon name='edit' color='#212B51' size={25} onPress={this._showDateTimePicker} />
                    </TouchableOpacity>
                </View>

                <TouchableOpacity
                    style={[styles.buttonContainer, styles.loginButton]}>
                    <Text style={styles.loginText}> Submit </Text>
                </TouchableOpacity>

                 <DateTimePicker
                    isVisible={this.state.isDateTimePickerVisible}
                    onConfirm={this._handleDatePicked}
                    onCancel={this._hideDateTimePicker}
                    mode={'time'}
                    is24Hour={false}
                /> 
            </ScrollView>
        );
    }

I want 5 different value picked and want to display them all. Please help Thanks in advance

0 answers