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. Non-Editable Input Field by Default:

   • The input field for the calendar is now non-editable by default.
   • To make the input field editable, the user must explicitly set the editable prop to true.

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)

   • The validation prop can be set to either error or warning.
   • When the validation is set to error, the system will throw an error if the entered date is out of the specified minDate or maxDate range.
   • When the validation is set to warning, 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 ↗︎