Added support for time in dateinput component

[shivankacker]

Proposed Changes

• Fixes Care Date Time Component #6858
• Adds support for time in the DateInputV2 component.
• Replaces all occurrences of datetime-local inputs

@ohcnetwork/care-fe-code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

[netlify]

✅ Deploy Preview for care-ohc ready!

Name	Link
🔨 Latest commit	3f52db1
🔍 Latest deploy log	https://app.netlify.com/sites/care-ohc/deploys/66e478dc533f7b00092c8cd8
😎 Deploy Preview	https://deploy-preview-8504--care-ohc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cypress]

CARE    Run #3341

Run Properties:   Passed #3341  •  3f52db1723: Added support for time in dateinput component

Project	CARE
Branch Review	support-time-in-dateinput
Run status	Passed #3341
Run duration	03m 02s
Commit	3f52db1723: Added support for time in dateinput component
Committer	Shivank Kacker
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	128
View all changes introduced in this branch ↗︎

[nihal467]

@shivankacker

• When you open the date and time component in the patient consultation page, the entire form is scrolled to the right side, making it hard for the user to see what is the field heading since they are left-aligned
• Once a user clicks on a specific time, then the component should auto-close

• the placeholder text { hh: mm a }, what is meant by "a" in this text?

• We had an existing behavior where typing "12092024" would automatically format the input as 12/09/2024. This behavior was removed in your PR. Please revert the change and retain the auto-formatting in the component.
• When the user types "12092024" and moves out of focus of the element or switches tabs, the entered data resets to the current date and time in the discharge pop-up.

• Since the auto-formatting is not working, there is no limit in user input
• On mobile view, the component is clipping in, making it properly responsive across devices

• Even if the user manually, types all the details by manual formatting, the component still reset to the current date and time

Personal Note: Bro, instead of modifying the entire Cypress test to make it pass, try to understand the core problem of test fail. Then, debug it

CC: @gigincg

[nihal467]

@shivankacker Bro, create a checklist of all the forms where you're changing the component and add it to the description. Review the functionality and responsiveness of each form one by one before requesting the next QA review.

[shivankacker]

@nihal467

1. Will see to the scroll issue. Wasn't happening with my screen size. I even went ahead and fixed the overflow issue that the existing component was causing. The scroll resets once the time is entered.

Before:

After:

Will check and fix this one.

3. I did not keep the auto closing thing because : It will close if a user will set the time before setting the date or vice-versa which makes it a UX issue.
4. "a" means AM/PM. If it is not understandable I will change it to "am/pm"

We had an existing behavior where typing "12092024" would automatically format the input as 12/09/2024

5. The existing behaviour made it easy to enter the date, but totally hard to update it. The reason it was removed was so that the user does not face this while editing the date:

Screen.Recording.2024-09-13.at.9.31.58.PM.mov

Because this behaviour was changed, the tests were also changed. Adding any format restrictions WHILE a user is typing would always result in these kind of issues.

6. The input will auto reset if the entered time is not of the desired format.
7. On mobile devices, the component can be scrolled left-right. This is because the date input would become small if i try to change sizes/ do anything else.
8. You did not add space, which made it an invalid format.

cc. @gigincg

[shivankacker]

@nihal467

• because you did not like the left-right scroll, I changed it to go the next row. Let me know if it doesn't look good.
• changed "a" to "am/pm"
• fixed the edge case of the overflow. Also verified all the inputs again. Please let me know if I missed out on something.
• Also the input will show a red border now if the input format is wrong. Just an add on to make it fool proof.

cc. @gigincg

[github-actions]

👋 Hi, @shivankacker,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

---

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.