feat: support editable input | min & max dates | dd-mm-yyyy format in CalendarInput

[alaa-yahia]

Implements LIBS-440 & DHIS2-17520 & LIBS-418

Supporting pull request

Description

• Make CalendarInput component editable
• Support min and max date
• Support dd-mm-yyyy date format

Below are the key updates:

1. Editable Input Field by Default:

   • The input field for the calendar is editable by default.

2. Date Format Handling

   • The date format changes based on the user's input.
   • Subsequent dates will follow the format of the last valid date entered unless a new format is provided by typing a valid date into the input field.

3. Validation Behaviour (Error/Warning)

   • When the strictValidation is set to true, the system will throw an error if the entered date is out of the specified minDate or maxDate range.
   • When the strictValidation is set to false, a warning will be issued without throwing an error.
   • This validation does not apply if the date string itself is invalid as it will always throw an error.

To do next

• Errors should not be displayed when the user enters a partial date in the input field.
• When minDate and maxDate are specified, dates outside the allowed range should be grayed out in the date picker.

Checklist

• API docs are generated
• Tests were added
• Storybook demos were added

[dhis2-bot]

🚀 Deployed on https://pr-1504--dhis2-ui.netlify.app

[cypress]

Passing run #3421 ↗︎

0

584

0

0

0

Details:

fix: lint warnings
Project: ui	Commit: d77e2ef530
Status: Passed	Duration: 07:46 💡
Started: Jun 10, 2024 10:39 AM	Ended: Jun 10, 2024 10:46 AM

Review all test suite changes for PR #1504 ↗︎

[kabaros]

this looks good to me - just wanted to have the work in this PR merged as part of it then we can merge and publish it

[dhis2-bot]

🎉 This PR is included in version 9.9.0-alpha.2 🎉

The release is available on:

• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀