#Configure Date Picker with React hook form in ts

10 messages · Page 1 of 1 (latest)

ebon vortex
#

Error:

Type 'CalendarDate | undefined' is not assignable to type 'DateValue | null | undefined'.
Type 'CalendarDate' is not assignable to type 'DateValue | null | undefined'.
Type 'CalendarDate' is not assignable to type 'ZonedDateTime'.
Property '#private' in type 'CalendarDate' refers to a different member that cannot be accessed from within type 'ZonedDateTime'.

Code

<Controller
control={control}
name={name}
render={({ field: { value, onChange, ...rest } }) => (
<DatePicker
dateInputClassNames={{
base: !w-full border !rounded-lg ${ hasError ? "border-red-500" : "border-gray-300" },
inputWrapper: "bg-transparent",
}}
radius="sm"
{...rest}
value={value ? toCalendarDate(value) : undefined}
onChange={(date: CalendarDate | null) => {
if (date) {
const dateValue = new Date(date.year, date.month - 1, date.day);
onChange(dateValue);
} else {
onChange(null);
}
}}
/>
)}
/>

exotic compass
#

can u share your package.json

ebon vortex
#

"dependencies": {
"@heroui/button": "^2.2.10",
"@heroui/date-picker": "^2.3.10",
"@heroui/react": "^2.6.14",
"@heroui/select": "^2.4.10",
"@heroui/spinner": "^2.2.7",
"@heroui/switch": "^2.2.9",
"@heroui/system": "^2.4.7",
"@heroui/table": "^2.2.9",
"@heroui/theme": "^2.4.6",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"framer-motion": "^12.0.1",
"lucide-react": "^0.473.0",
"next": "15.1.5",
"next-auth": "^4.24.11",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"tailwind-merge": "^2.6.0",
"tailwindcss-animate": "^1.0.7",
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@internationalized/date": "^3.7.0",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.1.5",
"moment": "^2.30.1",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}

exotic compass
#

here: @internationalized/date": "^3.7.0

#

as mentioned in docs, please use the fixed version 3.6.0

#

in next version, we ll include in our package.

ebon vortex
#

still getting the same error

"devDependencies": {
"@eslint/eslintrc": "^3",
"@internationalized/date": "^3.6.0", // also tried with "3.6.0"
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.1.5",
"moment": "^2.30.1",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}

error

Type 'import("/Users/PBL/Documents/prince/rapido/code/separate-experiment-dashboard/experiments-dashboard/node_modules/.pnpm/@[email protected][email protected]/node_modules/@react-types/calendar/src/index").DateValue | null | undefined' is not assignable to type 'import("/Users/PBL/Documents/prince/rapido/code/separate-experiment-dashboard/experiments-dashboard/node_modules/.pnpm/@[email protected]/node_modules/@internationalized/date/dist/types").DateValue | null | undefined'.
Type 'CalendarDate' is not assignable to type 'DateValue | null | undefined'.
Type 'CalendarDate' is not assignable to type 'ZonedDateTime'.
Property '#private' in type 'CalendarDate' refers to a different member that cannot be accessed from within type 'ZonedDateTime'.ts(2322)
inputs.d.ts(67, 3): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & DatePickerProps<DateValue>'

ebon vortex
#

anyone?

exotic compass
#

do u define the type as DateValue | null for the default value ?

ebon vortex
#

This got fixed, reinstalled dependencies again.