endDate is undefined on range date picker

[SahinoorHUB]

Description I tried to get endDate from this date picker. The start date is given properly but then the end date is undefined.

Console Log

LOG start "2024-02-06T18:30:00.000Z" LOG end undefined

My Code

const DateRangePickerModel = () => {  
    const [startDate, setStartDate] = useState(dayjs());
    const [endDate, setEndDate] = useState(dayjs()); 
    const setDate =  (startDate: any, endDate: any) => { 
        console.log("start", startDate); 
        console.log("end", endDate); 
    };

    return (
        <View style={styles.container}>
            <DateTimePicker
                mode="range" 
                startDate={startDate} 
                endDate={endDate}
                onChange={({startDate, endDate}) => setDate(startDate, endDate)}
                displayFullDays={true}
                timePicker={false}
                selectedItemColor={Colors.ui_dark_bg}
                selectedTextStyle={styles.selectedTextStyle} 
                headerButtonStyle={styles.headerButtonStyle}
                headerButtonColor={Colors.color_white}
                headerTextStyle={styles.headerTextStyle} 
                todayContainerStyle={styles.todayContainerStyle} 
            />  

        </View>
    );
};

Additional Information react: 18.2.0 react-native: 0.73.4 react-native-ui-datepicker": 2.0.1,

[sirlojik]

I am also experiencing the same issue. I can't select start or end date. when i tap a date i get the feedback reported above

[YaoHuiJi]

Same issue here, I downgrade to 1.0.11, it looks like v2.x break many things, and not mentioned in the release log, like onChange(it is onValueChange in 1.0.11) return a dayjs object not a js date, and time picker performance issue still exists...It's a little frustrating

[jadevdl]

Hello! Same issue using:

• react-native-ui-datepicker: 2.0.2
• react 18.2.0
• react-native: 0.74.1

I can select a startDate though, just not the endDate that is always undefined. @farhoudshapouran do you know if there is any workaround?

[Gbillington1]

I am getting this same issue

[xavier-villelegier]

I personally had this issue when mutating/cloning the startDate/endDate that DateTimePicker gives me in the onChange callback (like formatting, or re-calling dayjs on startDate/endDate)

Once passing the exact same object I received from the callback, it works fine:

const MyDatePicker = () => {  
    const [startDate, setStartDate] = useState<Dayjs>(dayjs())
    const [endDate, setEndDate] = useState<Dayjs>(dayjs())
    const setDates =  (startDate: Dayjs, endDate: Dayjs) => { 
        setStartDate(startDate)
        setEndDate(endDate)
    }

    return (
        <DateTimePicker
            mode="range" 
            startDate={startDate} // <- This object has to be the exact one coming from `onChange`     
            endDate={endDate} // <- This object has to be the exact one coming from `onChange`     
            onChange={({ startDate, endDate }) => setDates(startDate, endDate)}
        />
    )
}

If you need to apply extra formatting, you probably need to use temporary states while manipulating the picker, and then setting your other formatted state