With Typescript + Date validation + PrimeVue DatePicker fail compilation

[rpatidar]

What happened?

I am trying to use DatePicker with vee-validate

i am getting

src/views/projects/NewProject.vue:120:19 - error TS2322: Type 'Ref<Date | null>' is not assignable to type 'Date | Date[] | (Date | null)[] | null | undefined'.

120                   v-model="endDate" />
                      ~~~~~~~

  node_modules/primevue/datepicker/index.d.ts:527:5
    527     modelValue?: Date | Array<Date> | Array<Date | null> | undefined | null;
            ~~~~~~~~~~
    The expected type comes from property 'modelValue' which is declared here on type 'DatePickerProps & VNodeProps & AllowedComponentProps & ComponentCustomProps & Record<string, unknown>'

when i pass the date directly it works.

let endDate = ref(new Date()) 
....
...
<DatePicker
                  id="endDate"                  
                  v-model="endDate" />

but when i pass via model

interface InputForm {
    endDate: Date | null;
}

const schema = yup.object<InputForm>({,
  endDate: yup.date(),
});

const { defineField, handleSubmit } = useForm<InputForm>({
  initialValues : {,
    endDate: new Date(),
  },
  validationSchema: schema,
});

const [endDate] = defineField("end")

...

<DatePicker
                  id="end"                  
                  v-model="endDate" />

this gives me the error mentioned above.

Reproduction steps

1. 2. 3. ...

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [X] Firefox
• [X] Chrome
• [ ] Safari
• [ ] Microsoft Edge

Relevant log output

➜  WebUI git:(main) ✗ bun run build
$ vue-tsc -b && vite build
src/views/projects/NewProject.vue:114:19 - error TS2322: Type 'Ref<Date | null>' is not assignable to type 'Date | Date[] | (Date | null)[] | null | undefined'.

114                   v-model="startDate" />
                      ~~~~~~~

  node_modules/primevue/datepicker/index.d.ts:527:5
    527     modelValue?: Date | Array<Date> | Array<Date | null> | undefined | null;
            ~~~~~~~~~~
    The expected type comes from property 'modelValue' which is declared here on type 'DatePickerProps & VNodeProps & AllowedComponentProps & ComponentCustomProps & Record<string, unknown>'

src/views/projects/NewProject.vue:120:19 - error TS2322: Type 'Ref<Date | null>' is not assignable to type 'Date | Date[] | (Date | null)[] | null | undefined'.

120                   v-model="endDate" />
                      ~~~~~~~

  node_modules/primevue/datepicker/index.d.ts:527:5
    527     modelValue?: Date | Array<Date> | Array<Date | null> | undefined | null;
            ~~~~~~~~~~
    The expected type comes from property 'modelValue' which is declared here on type 'DatePickerProps & VNodeProps & AllowedComponentProps & ComponentCustomProps & Record<string, unknown>'

Found 2 errors.

error: script "build" exited with code 1
➜  WebUI git:(main) ✗

Demo link

not_able_to_reproduce_on

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[rpatidar]

As of now I have added <!-- @vue-ignore --> and everything works for me. but assuming this is temporary workaround,

[hanzelkatomas]

Have you tried const endDate: Ref<Date> =ref(new Date())?