(feat) O3-2491: Add support for a time picker

[NethmiRodrigo]

Requirements

• This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
• My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
• My work includes tests or is validated by existing tests.

Summary

This PR aims to support the rendering of a time picker alongside the date picker based on the prop datePickerFormat. If the prop is null, only the date picker will be displayed.

Screenshots

Submitting values

Screen.Recording.2024-06-12.at.11.56.03.AM.mov

Editing time

Screen.Recording.2024-06-12.at.11.57.03.AM.mov

Related Issue

JIRA ticket

Other

PR to update prop name

[github-actions]

Size Change: +372 B (+0.04%)

Total Size: 1.05 MB

ℹ️ View Unchanged

Filename	Size	Change
dist/184.js	11.2 kB	0 B
dist/225.js	2.57 kB	0 B
dist/29.js	163 kB	0 B
dist/300.js	709 B	0 B
dist/31.js	5.32 kB	0 B
dist/318.js	2.43 kB	0 B
dist/327.js	1.84 kB	0 B
dist/335.js	967 B	0 B
dist/353.js	3.02 kB	0 B
dist/371.js	71.5 kB	0 B
dist/41.js	3.36 kB	0 B
dist/436.js	759 B	0 B
dist/465.js	182 kB	0 B
dist/540.js	2.63 kB	0 B
dist/55.js	2.14 kB	0 B
dist/635.js	14.3 kB	0 B
dist/8.js	3.68 kB	0 B
dist/800.js	245 kB	+204 B (+0.08%)
dist/979.js	6.85 kB	0 B
dist/99.js	690 B	0 B
dist/993.js	3.09 kB	0 B
dist/998.js	15.6 kB	0 B
dist/main.js	300 kB	+168 B (+0.06%)
dist/openmrs-form-engine-lib.js	3.76 kB	0 B

_{compressed-size-action}

[samuelmale]

For cases where datePickerFormat is set to "timer", what kind of value will be submitted to the backend? @NethmiRodrigo Can you share a sample payload of an obs?

[samuelmale]

Here you're introducing a new rendering that is supported through the "date" rendering. With the introduction of the datePickerFormat prop, we only need one rendering "date". Meaning we should consider removing or deprecating the "datetime" rendering.

[NethmiRodrigo]

Adding time was a mistake so I removed it. Leaving datetime as it is for now as it has being referenced in a couple of places.

[samuelmale]

I think we need to update existing references to ensure that we have a single source of truth. Eg. We should use datePickerFormat here to determine the date-picker type.

[NethmiRodrigo]

For cases where datePickerFormat is set to "timer", what kind of value will be submitted to the backend? @NethmiRodrigo Can you share a sample payload of an obs?

{ "value": "2024-05-27", "concept": "81a50873-81c8-4c2e-8892-b2cd635b704c", "formFieldNamespace": "rfe-forms", "formFieldPath": "rfe-forms-__tyxtEosu2" }

Seems like only the date is going through at the moment (when the input was both date and time), trying to fix it now.

[samuelmale]

@NethmiRodrigo can you attach a video or GIF demonstrating a scenario where the date-picker type is set to "timer" in enter vs edit mode?

[NethmiRodrigo]

@NethmiRodrigo can you attach a video or GIF demonstrating a scenario where the date-picker type is set to "timer" in enter vs edit mode?

@samuelmale updated the description with a screen recording of submitting and editing

[samuelmale]

LGTM, thanks @NethmiRodrigo!

[denniskigen]

Is the consensus that we're keeping the datetime rendering type around for compatibility reasons? I'm asking w.r.t openmrs/openmrs-esm-form-builder#289.

[samuelmale]

It's fair to treat datetime as a deprecated rendering type. But there is backwards compatibility see.

[denniskigen]

Also, it looks like labels for DatePicker components aren't getting rendered (snippet from the A New Sample Form for Testing schema on dev3):

[NethmiRodrigo]

Also, it looks like labels for DatePicker components aren't getting rendered (snippet from the A New Sample Form for Testing schema on dev3):

Hmm very weird. I'll take a look

[samuelmale]

This is related to this openmrs/openmrs-esm-core#1041. The labelText prop was renamed to label

[ibacher]

I've restored the labelText attribute and deprecated the label one.

[has9h]

Hi @denniskigen @NethmiRodrigo @samuelmale sorry for tagging you all, but I'm not sure what the corresponding PR for this is in the form-builder repo; we will need this into the form-builder to render the time picker, correct?