Care Date Time Component

[konavivekramakrishna]

Is your feature request related to a problem? Please describe.
Currently, in CARE we have a Custom Date Component for date input (not browser default).

In CARE, we currently use the browser default date/time input field.

We need to create a custom date/time component for input both date and time.

[konavivekramakrishna]

@rithviknishad

can you please assign me

[konavivekramakrishna]

@Ashesh3 @rithviknishad

can you please look into this

I am trying whether we can implement an infinite scroll for hours and minutes. Currently, when a user reaches the end, i.e., 23 hours or 59 minutes, the scroll stops. However, in the browser's default date-time input, the scroll is continuous.

[Ashesh3]

@konavivekramakrishna I've created a quick fiddle with the logic you are expecting, check it out if that helps.

https://codesandbox.io/p/sandbox/react-scroll-time-j7ln3y

[konavivekramakrishna]

@Ashesh3 @rithviknishad
Could you please check the following link on a mobile device and suggest any improvements for scrolling

https://codesandbox.io/p/sandbox/react-scroll-time-forked-nxnxjn
https://nxnxjn.csb.app/

[Ashesh3]

@Ashesh3 @rithviknishad Could you please check the following link on a mobile device and suggest any improvements for scrolling

codesandbox.io/p/sandbox/react-scroll-time-forked-nxnxjn nxnxjn.csb.app

Let's not over engineer it. Do not make it infinite scroll, just make it a static list. User can scroll up or down to select the time.
Reference:

[nihal467]

@konavivekramakrishna Unassigning you from this issue due to inactivity. Feel free to reassign yourself if you are still working on it.

[Vasanth375]

@Ashesh3 @rithviknishad

Can you please look into this
I have been working on this issue from a few days back. Here are the screenshots of the code and interface.
if you say yes, I will raise a PR

[rithviknishad]

@Vasanth375 Nice attempt, few things...

• Could you rethink the UI a bit? It'd be great if it could be kept in a single row.
• You'll need to create a separate component "DateTimeFormField" instead of adding time related inputs to the DateFormField. DateFormField is intended to be used only for date "ONLY" inputs.

[Vasanth375]

@rithviknishad Please check it once,
I've created a separate component DateTimeFormField