Date picker does not work in a reactive form

[Maurits Lourens]

Describe the bug

When the date picker is added to a form and the value is set using form.patchValue,

How to reproduce

Example app which shows the issue

Steps to reproduce the behavior:

1. Both date pickers get an initial date, only the bottom is display the date
2. Click on the top date picker to change the date
3. Select a date from the picker that opens up
4. Nothing happens, the date is not set in the form

Expected behavior

The form should be updated once the date is selected, like it does in the bottom one.

Versions

Clarity version:

• v13.x
• v15.x
• Other:

Framework version:
Angular 16

Device:

• Type: laptop
• OS: Linux Mint
• Browser Chrome
• Version 117

Additional notes

Add any other notes about the problem here.

[pawaru]

Check if this approach using form.patchValue helps: https://stackblitz.com/edit/clarity-dark-theme-clr16-o5yc6i

Datepicker is prefilled with specified date and is able to update as well.

[Maurits Lourens]

that does work, but it looks like a workaround

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.

[Daniel Tsanev]

@mauritslourens the form control is binded to a native input which accepts a string while you patch a Date object -- so the solution provided is accurate and proper use. The issue comes from that patching the date object brakes something in the component and from there you cannot change the value.