Showing the DatePicker doesn't show the picker, just the selected date...

Really confused by this.

This is what i see when i show the datepicker. Then i have to click it again to pull up the ‘date’ mode. Then selecting a date doesn’t close the picker.

                <View style={styles.content}>
                    <Text style={styles.contentHeadText}>Date</Text>
                    <TouchableOpacity style={[]} onPress={() => setShowDatePicker(true)} accessibilityRole='button'>
                        <Text>{moment(selectedDate).format('MMM DD')}</Text>
                    </TouchableOpacity>
                    {selectedDate && showDatePicker && (
                        <DateTimePicker
                            style={styles.dropdownContainer}
                            mode={'date'}
                            display='default'
                            minimumDate={now}
                            value={selectedDate}
                            onChange={handleDateChange}
                            textColor={'#000000'}
                        />
                    )}
                </View>

My change handler:

    const handleDateChange = (event, date) => {
        setSelectedDate(date)
        setShowDatePicker(Platform.OS === 'ios')
    }

All I want to do is select a date and have it close with my state updated…

[ksamdb]

I changed a display mode to ‘spinner’ to solve this issue.

[HJaffery]

Really confused by this.

This is what i see when i show the datepicker. Then i have to click it again to pull up the ‘date’ mode. Then selecting a date doesn’t close the picker.

                <View style={styles.content}>
                    <Text style={styles.contentHeadText}>Date</Text>
                    <TouchableOpacity style={[]} onPress={() => setShowDatePicker(true)} accessibilityRole='button'>
                        <Text>{moment(selectedDate).format('MMM DD')}</Text>
                    </TouchableOpacity>
                    {selectedDate && showDatePicker && (
                        <DateTimePicker
                            style={styles.dropdownContainer}
                            mode={'date'}
                            display='default'
                            minimumDate={now}
                            value={selectedDate}
                            onChange={handleDateChange}
                            textColor={'#000000'}
                        />
                    )}
                </View>

My change handler:

    const handleDateChange = (event, date) => {
        setSelectedDate(date)
        setShowDatePicker(Platform.OS === 'ios')
    }

All I want to do is select a date and have it close with my state updated…

Did you find any solution. I am also stuck on the same issue