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	c3c1727
🔍 Latest deploy log	https://app.netlify.com/sites/care-ohc/deploys/671f1a9afe17530008398d8d
😎 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 #3752

Run Properties:   Passed #3752  •  c3c172789b: Added support for time in dateinput component

Project	CARE
Branch Review	support-time-in-dateinput
Run status	Passed #3752
Run duration	03m 40s
Commit	c3c172789b: 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	125
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

[bodhish]

Only covered 30% @shivankacker self review your code once.

[shivankacker]

@bodhish cleaned up as much as possible

[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.

[bodhish]

Lets merge this and see what breaks!

[bodhish]

@shivankacker do fix the conflicts and merge it asap.

[shivankacker]

@bodhish can you merge before another merge conflict happens 🥲

resolved

[github-actions]

@shivankacker @shivankacker Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌

[shivankacker]