1

I am currently working on a React app together with Formik that requires the use date and time pickers. I am building the app using Material-UI and have been looking at Material-UI Pickers over at https://material-ui-pickers.dev/

Since I am new to React/Formik/Material-UI, I have the following questions:

  1. Is it possible to use Material-UI Pickers together with Formik as I need to maintain state of all dates/time provided by user?

  2. When it comes to the user input for both dates and times, I have a case when the user needs to enter both a date as well as time but in 24 hours format and also need to include seconds, i.e.

the format that I am after is: DD/MM/YYYY HH24:MI:SS

Is this possible with Material-UI Pickers as from what I could see in there demo, I didn't see the capability to add seconds?

  1. I also have another scenario where the user input will just be a time component alone, again with seconds, just like in my previous question, i.e.:

HH24:MI:SS

I guess my main concern is, how do I allow a user to also provide the seconds SS as this is required?

tonyfat
  • 311
  • 1
  • 6
  • 16
  • Related: https://stackoverflow.com/questions/63226519/react-datepicker-time-selection-with-seconds, https://github.com/mui-org/material-ui-pickers/issues/739 – jskattt797 Jul 20 '21 at 21:07

1 Answers1

2

Best Way to do it is using DatePicker(For setting dates) and Timepicker(Provides seconds feature also along with hour and min setting) both seperately , You can use Material UI Pickers with Formik , I have put it in a sandbox , you can refer it for implementing

Edit restless-meadow-hj0em

Goutham J.M
  • 1,726
  • 12
  • 25
  • I will take a look and come back to you – tonyfat Apr 20 '21 at 06:59
  • Just have a question and hoping it is possible but when I am just using the `` alone and select the `hour:min:sec` and press OK, against the value for this field in Formik, it is also including the date portion at the beginning. For my requirement, I only want to store the time portion only without the date. Is this possible? – tonyfat Apr 20 '21 at 10:33
  • Could you share the date format what you are getting ? – Goutham J.M Apr 20 '21 at 10:42
  • I select the required time, in this example, it is: `20:45:19` and when I press OK it returns: `"2021-04-20T10:45:19.838Z"` As you can see, it prepends today's date but I only want the time. I'm also not sure if the time being returned is actually `20:45:19` – tonyfat Apr 20 '21 at 10:47
  • That is the standard date format you can get the hours , minuts and seconds from it using this function ```var hours = new Date("2021-04-20T10:45:19.838Z"). getHours var minutes = new Date("2021-04-20T10:45:19.838Z"). getMinutes var seconds=new Date("2021-04-20T10:45:19.838Z"). getSeconds ``` – Goutham J.M Apr 20 '21 at 10:52
  • Sorry, what function as nothing appeared in your comment? So, there is no way of just returning the time component alone after pressing OK? – tonyfat Apr 20 '21 at 10:54
  • Is there any chance please of updating your CodeSandbox example and have it returned this time portion alone? – tonyfat Apr 20 '21 at 10:56
  • I have updated the code sandbox , in console you are getting the format which you had asked for , save two values i, one is standard format (you will have to pass it if user needs to edit time in any case), another one is for showing user in the format – Goutham J.M Apr 20 '21 at 11:04
  • If you found my answer helpful, do accept the answer and upvote the same – Goutham J.M Apr 20 '21 at 11:16