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

[alxvallejo]

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...

[Yadro]

Just change display to "inline" it will show date picker.
To close picker you should set false setShowDatePicker(false). In your case Platform.OS === 'ios' return true.

[genesy]

is it not possible to show the dialog when shown?

[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

[MaxwellDG]

I was having this problem too, and solved it with this youtube video: https://www.youtube.com/watch?v=lpIEpggB6o4
The trick is to make whatever display you want and then pop off a modal for the DateTimePicker, thus avoiding that annoying little default display.

export default ({value, setFieldValue}) => {
  const [date, setDate] = useState(new Date(1598051730000));
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);
  const [picked, setPicked] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setFieldValue('birthday', currentDate)
    setPicked(true)
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode('date');
  };


  return (
    <View>
        <Text style={styles.labelText}><Text style={styles.redAsterisk}>*</Text>Date of Birth</Text>
        <Pressable style={styles.dateContainer} onPress={() => setShow(true)}>
            <View>
                <Text style={styles.dateText}>{picked ? moment(value).format('YYYY-MM-DD') : 'SELECT OPTION'}</Text>
                <Modal
                    transparent={true}
                    animationType='slide'
                    visible={show}
                    supportedOrientations={['portrait']}
                    onRequestClose={() => setShow(false)}
                >
                <SafeAreaView style={{flex: 1}}>
                    <Pressable
                        style={{flex: 1, alignItems: 'flex-end', flexDirection: 'row'}}
                        activeOpacity={1}
                        visible={show}
                        onPress={() => setShow(false)}
                    >
                        <TouchableHighlight
                            underlayColor='transparent'
                            style={{flex: 1}}
                        >
                            <View
                                style={{backgroundColor: "#FFFFFF", overflow: 'hidden', borderTopLeftRadius: 25, borderTopRightRadius: 25}}
                            >
                                <View style={{marginTop: 20, marginBottom: 20, backgroundColor: 'white'}}>
                                    <DateTimePicker
                                        display='spinner'
                                        mode='date'
                                        value={value}
                                        onChange={onChange}
                                    />
                                </View>
                            </View>
                        </TouchableHighlight>
                    </Pressable>
                    </SafeAreaView> 
                    <SafeAreaView style={{flex: 0, backgroundColor: '#FFFFFF'}} />
                </Modal>
            </View>
        </Pressable>
    </View>
  );
};

[ksamdb]

I changed a display mode to 'spinner' to solve this issue.

[iKoru]

any solutions for default(calendar) display?