Date picker ignore date format when in a form

[arthurgregorio]

Describe the bug

When I use the datepicker inside a form and I try to apply the initial values to it using a reactive object, it applies to the field without the proper formatting.

This only happens if the initialization of the value is using the initial value of an enclosing form component.

Here's the page where I found this problem in my OSS project: https://github.com/web-budget/front-end/blob/main/src/views/registration/financial-periods/FinancialPeriodFormView.vue#L93

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/b5fgb3x3?file=src%2FApp.vue

Environment

Web application

Vue version

4.5.4

PrimeVue version

3.5.25

Node version

22.13.1

Browser(s)

Edge 143.0.3650.139

Steps to reproduce the behavior

1. Add a datepicker to a form
2. Initialize it using the initial values of the form
3. The value will be without formating
4. Click in the field and select a new value from the drop down
5. The value will be formatted

Expected behavior

When you apply the value using the initial values it should behave the same way when you apply using v-model for example, respecting the format defined in the date format property

[arthurgregorio]

Could find a workaround for this at least until we could find a final solution.

Basically, you can use v-model together with the form, using the initial values as source for the v-model also, the bad thing for this "solution" is when you need to load the form after a call to an API or something, using the reative state of the initial values will trigger the issue documented above but if you apply the values to the form and later apply it to the initial values reactive property, it will work and both (the form and the source model) will be populated and validations will work.

The downside for this is the overhead but clearly shows that the issue is around the form stuff.

Link to this in my project: https://github.com/web-budget/front-end/blob/main/src/views/registration/financial-periods/FinancialPeriodFormView.vue#L65