I am making a custom date picker component in React Native and it works in most cases when I use it in other codebases. However, I am getting a really weird error on initialization right now
TypeError: startDate.getDate is not a function. (In 'startDate.getDate()', 'startDate.getDate' is undefined)
Which is odd, since the code looks as it does below, and has the following print statements when run
export default function DatePicker({
startDate=today // today is a const set to new Date(), but this prop is supplied in the declaration
// Other properties that are not relevant to the problem at hand
}){
///////////////////////
/// ///
/// Preliminary ///
/// ///
///////////////////////
/////////////////
// Local State //
/////////////////
console.log("Date Picker's Start Date set at ", startDate)
const startDay = startDate.getDate()
const startMonth = startDate.getMonth()
const startYear = startDate.getFullYear()
With the following print statements
LOG Date Picker's Start Date set at 2022-09-14T13:59:19.782Z
LOG Date Picker's Start Date set at 2022-09-14T13:00:19.782Z
LOG Date Picker's Start Date set at 2022-09-14T13:00:19.782Z
LOG Date Picker's Start Date set at 2022-09-14T13:00:19.782Z
LOG Date Picker's Start Date set at 2022-09-14T13:00:19.782Z
LOG Date Picker's Start Date set at Wed Sep 14 2022 09:59:21 GMT-0400 (EDT)
LOG Date Picker's Start Date set at Wed Sep 14 2022 09:59:21 GMT-0400 (EDT)
ERROR TypeError: startDate.getDate is not a function. (In 'startDate.getDate()', 'startDate.getDate' is undefined)
Which all look like viable Date Objects... so I am unsure as to why it is erroring out on startDate.getDate()
The parent component calling this child DatePicker calls it in the following way...
// Renders Date Picker (Conditionally)
function renderDatePicker(meetings){
let white = true
if (COLORS.iconLight !== "#fff" && COLORS.iconLight !== "#FFF"){
white = false
}
if (dateOpen){
return(
<View style={{marginTop: 20}}>
<DatePicker
baseColor={COLORS.gradientColor2}
displayTileColor={COLORS.gradientColor1}
clearDate={reset}
startDate={date}
onDateChange={(resolved) => handleDateChange(resolved)}
whiteArrow={white}
timeTitleStyle={{color: COLORS.iconLight, fontFamily: "Gilroy-Bold", marginBottom: 15, fontSize: 16}}
dateTextStyle={{fontSize: 26, fontFamily: 'Gilroy-SemiBold', textAlign: 'center', paddingTop: 2}}
displayTileStyle={{borderWidth: 0, padding: 7, minWidth: 90, height: 40, borderRadius: 5}}
timePicker={true}
/>
</View>
)
}
}
Where const [date, setDate] = useState(new Date())