farhoudshapouran
endDate is undefined on range date picker
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,
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
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
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?
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
It's quite odd, I didn't quite understand what you suggested @xavier-villelegier . I'm facing the same problem here...
It's quite odd, I didn't quite understand what you suggested @xavier-villelegier . I'm facing the same problem here...
@joelpiccoli Can you repro your piece of code with the issue on a Snack so that I can check ?
Actually @xavier-villelegier , I fixed it yesterday during the night here in Brazil. The problem was I was applying a format in the endDate to show it. I removed it and everything works. It's strange, that a ".format()" can influence a useState?