Up next in 10
Build a React.js Clock Time Picker UI Form Input Field Using react-time-picker in Browser Using JSX
2K views
Jun 3, 2025
Get the full source code of application here: https://codingshiksha.com/react/build-a-react-js-clock-time-picker-ui-form-input-field-using-react-time-picker-in-browser-using-jsx/ Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions https://youtu.be/Bon8Pm1gbX8 Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:00
uh hello guys welcome to this video So
0:02
in this video I'll show you how to embed
0:04
this uh time picker form input field
0:07
inside your ReactJS application So
0:09
whenever you select uh this input field
0:12
to pick time here this nice little clock
0:14
will show and it will show you live
0:16
preview of whichever time that you
0:17
select right here The
0:20
hour the clock key it will actually show
0:23
you everything right here So it will
0:26
show you the selected time here It
0:28
supports all the time formats 24hour 12
0:31
hours So simply if you click it this
0:33
will show this nice little clock with
0:36
live preview And here you can adjust
0:38
your time here Simply select
0:41
whichever So it will adjust accordingly
0:44
and you will see selected time So this
0:45
is actually reacts uh third party module
0:50
that you need to install here which is
0:52
react time picker So this is actually
0:54
the name of the module that I'm talking
0:57
about here and it's very simple the
1:01
command So you simply install this It's
1:04
having almost 144,000 weekly downloads A
1:07
very popular module And now to get
1:10
started here we have a simple ReactJS
1:13
project Here I create a simple
1:15
functional component And then we need to
1:18
import this So we simply use the import
1:20
statement and just say import time
1:23
picker from react time picker So we
1:27
simply use the import statement and
1:29
actually import this module After that
1:31
we also need to import the CSS file of
1:34
this modules which will be located
1:36
inside React time
1:40
picker/ist/ timepicker CSS And also we
1:43
need to import the clock as well which
1:47
will be located inside react
1:51
clock/tist clock dot CSS So that clock
1:55
that you see we also need to import that
1:58
So react clock
2:00
So after we import this uh this react
2:04
clock will be located in a different
2:05
package I think you also need to install
2:08
this This package is react
2:10
clock So also install this package as
2:13
well which shows you the analog clock
2:16
here inside your reacts application You
2:18
also need to install this module as well
2:20
Almost 150,000 weekly downloads
2:24
So after we install this now we will
2:27
just create a simple
2:30
variable value and uh on change and for
2:34
this we'll be using the ustate hook and
2:37
initial value you can put any time here
2:40
I'm using 12 24hour format so this will
2:43
be 14 2:30 time and here wherever you
2:49
need to display the clock here uh the
2:51
time picker field so you just give it a
2:53
padding first of all of 20
2:56
pixel and uh then where you can actually
3:01
put a heading which will select time
3:06
24hour
3:10
format and then you simply use this
3:13
module time
3:15
picker and this actually takes some
3:17
options that we need to pass here First
3:19
option is your onchange event handler So
3:21
whenever you change the time this custom
3:24
function will execute So here we need to
3:26
define this function which is on change
3:28
inside your JavaScript So whenever you
3:31
choose any time this function will
3:34
execute on
3:38
change
3:46
So after this we will be also be
3:50
attaching the value which we defined
3:52
which is the current time
3:54
here this one we attaching
3:57
this So we don't need to define this
3:59
onchange because we already defined this
4:01
if you see on change So we just just
4:05
attaching this and it also takes an
4:08
option here format So what format here
4:11
Hour
4:14
minute mm If you also want to attach
4:17
second here you will also say SS So hour
4:20
minute second This is your time format
4:22
And if you want to disable
4:26
clock you can put either true or false I
4:29
will I need to show the clock So I will
4:31
say false So that's all that all these
4:34
options are there and after that uh we
4:38
can actually display whatever time the
4:40
user will select So selected time will
4:43
be located inside this variable which is
4:46
value So if you refresh your application
4:49
uh you will actually see this input
4:51
field appearing This is your time period
4:54
If you just click it then now it will
4:57
show you this is your minute clock and
5:00
if you adjust it you will see it will
5:02
adjust This is your second uh let's
5:05
suppose I set to 30 or we can change to
5:10
50 and this is your hour clock
5:13
here So as as you adjust the time here
5:16
it will return you the time here which
5:18
is
5:19
5:15 in this easy way you can see can
5:23
adjust your time
5:26
here So this is actually the module guys
5:29
If you want to integrate if you are
5:31
taking time input you can definitely use
5:34
this module which is react time picker
5:38
and uh which actually shows you with
5:41
this nice little clock as well as you
5:44
click All the source code is given in
5:46
the description of this video You can
5:48
refer to my blog
5:50
post and thank you very much for
5:52
watching this video and also check out
5:54
my website freeiatools.com which
5:57
contains thousands of tools regarding
5:59
audio video and image
#Programming
#Software
#Time & Calendars