Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Care Date Time Component #6858

Closed
konavivekramakrishna opened this issue Dec 13, 2023 · 9 comments · Fixed by #8504
Closed

Care Date Time Component #6858

konavivekramakrishna opened this issue Dec 13, 2023 · 9 comments · Fixed by #8504
Assignees

Comments

@konavivekramakrishna
Copy link
Contributor

konavivekramakrishna commented Dec 13, 2023

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

@konavivekramakrishna
Copy link
Contributor Author

@rithviknishad

can you please assign me

@konavivekramakrishna
Copy link
Contributor Author

konavivekramakrishna commented Dec 27, 2023

image
image
image

@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
Copy link
Member

Ashesh3 commented Dec 27, 2023

@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
Copy link
Contributor Author

@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
Copy link
Member

Ashesh3 commented Dec 30, 2023

@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:
msedge_TqHT60p5fh

@nihal467
Copy link
Member

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

@Vasanth375
Copy link

@Ashesh3 @rithviknishad

image
image
image

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
Copy link
Member

@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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
7 participants