feat: [DHIS2-15462] Use dhis2 UI calendarinput component in forms

[alaa-yahia]

Implements DHIS2-15462

---

Description

@dhis2/ui CalendarInput is used when capturing dates in forms.

[simonadomnisoru]

Hey @alaa-yahia, great job on this PR 👏 !

From capture-app side, I only added a small comment about hiding the default label. Additionally, can you please take a look and fix the failed cypress tests related to the calendar data-test selectors?

From the UI library side, these are the pending features that need to be added before merging this PR:

1. minimum and maximum support data - feat: support editable input | min & max dates | dd-mm-yyyy format in CalendarInput ui#1504
2. support for typing/removing a date - feat(calendar input): make input editable ui#1445
3. support for DD-MM-YYYY format - I couldn't find a ticket/PR for this. Let's sync up for the next step on this.

Thank you!

[alaa-yahia]

Hey @alaa-yahia, great job on this PR 👏 !

From capture-app side, I only added a small comment about hiding the default label. Additionally, can you please take a look and fix the failed cypress tests related to the calendar data-test selectors?

From the UI library side, these are the pending features that need to be added before merging this PR:

1. minimum and maximum support data - feat: support min & max dates in CalendarInput ui#1504
2. support for typing/removing a date - feat(calendar input): make input editable ui#1445
3. support for DD-MM-YYYY format - I couldn't find a ticket/PR for this. Let's sync up for the next step on this.

Thank you!

Hey,
All the three has work between the ui and multi calendar date library.
The one for editable input you mentioned is an old one.
This is the new one, I will update the name of the pull request when finalising it. I will add a ticket for DD-MM-YYYY, the functionality is already implemented in the multi calendar library pr.

minimum and maximum support data - feat: support min & max dates in CalendarInput ui#1504
support for typing/removing a date - feat: support min & max dates in CalendarInput ui#1504
support for DD-MM-YYYY format - support min & max date, DD-MM-YYYY date format

[simonadomnisoru]

In passOnProps, there are a lot of old props that are no longer used and it's quite hard to keep track. Is it possible to clean it up a bit and leave only the props that CalendarInput actually uses? You can also clean up unused props from parent components of Date.component.js. Thanks!

[alaa-yahia]

Will update the code!

[simonadomnisoru]

Solid work, well done @alaa-yahia ! 👏
Let's move it to QA and then discuss in one of our Tuesday syncs if we want to release with alpha or wait for the @dhis/ui stable release.

[superskip]

Just one question regarding validation: The new calendar component is doing validation internally, which makes sense since it's supposed to support exotic calendar types. But as far as I can see the Capture app is still doing its own validation - is it possible to make it use the validation result from the new calendar component instead? I can't see how this can be achieved with the current interface though (https://ui.dhis2.nu/components/calendar#props), but maybe that document is outdated.

[alaa-yahia]

Just one question regarding validation: The new calendar component is doing validation internally, which makes sense since it's supposed to support exotic calendar types. But as far as I can see the Capture app is still doing it's own validation - is it possible to make it use the validation result from the new calendar component instead? I can't see how this can be achieved with the current interface though (https://ui.dhis2.nu/components/calendar#props), but maybe that document is outdated.

Yeah @superskip the document is outdated as I haven't worked on docs yet.
I think changing how validation is returned from useDatePicker would make it possible for parent components to receive validation results. Specifically passing validation result to the object passed to onDateSelect which calls the parent onDateSelect.

[github-actions]

🚀 Deployed on https://deploy-preview-3658--dhis2-capture.netlify.app

[geethaalwan]

Tested successfully on 2.42,2.41.2,2.40.5,2.39.7 versions