care_fe icon indicating copy to clipboard operation
care_fe copied to clipboard

Published 20 hours ago • verified publisher icon coronasafe

Care Date Time Component

Open konavivekramakrishna opened this issue 1 year ago • 8 comments

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 avatar Dec 13 '23 07:12 konavivekramakrishna

@rithviknishad

can you please assign me

konavivekramakrishna avatar Dec 13 '23 11:12 konavivekramakrishna

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.

konavivekramakrishna avatar Dec 27 '23 15:12 konavivekramakrishna

@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

Ashesh3 avatar Dec 27 '23 16:12 Ashesh3

@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/

konavivekramakrishna avatar Dec 30 '23 08:12 konavivekramakrishna

@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

Ashesh3 avatar Dec 30 '23 09:12 Ashesh3

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

nihal467 avatar Apr 27 '24 06:04 nihal467

@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

Vasanth375 avatar May 22 '24 12:05 Vasanth375

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

rithviknishad avatar May 22 '24 12:05 rithviknishad

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

Vasanth375 avatar May 31 '24 12:05 Vasanth375