uh hello guys welcome to this video So
in this video I'll show you how to embed
this uh time picker form input field
inside your ReactJS application So
whenever you select uh this input field
to pick time here this nice little clock
will show and it will show you live
preview of whichever time that you
select right here The
hour the clock key it will actually show
you everything right here So it will
show you the selected time here It
supports all the time formats 24hour 12
hours So simply if you click it this
will show this nice little clock with
live preview And here you can adjust
your time here Simply select
whichever So it will adjust accordingly
and you will see selected time So this
is actually reacts uh third party module
that you need to install here which is
react time picker So this is actually
the name of the module that I'm talking
about here and it's very simple the
command So you simply install this It's
having almost 144,000 weekly downloads A
very popular module And now to get
started here we have a simple ReactJS
project Here I create a simple
functional component And then we need to
import this So we simply use the import
statement and just say import time
picker from react time picker So we
simply use the import statement and
actually import this module After that
we also need to import the CSS file of
this modules which will be located
inside React time
picker/ist/ timepicker CSS And also we
need to import the clock as well which
will be located inside react
clock/tist clock dot CSS So that clock
that you see we also need to import that
So react clock
So after we import this uh this react
clock will be located in a different
package I think you also need to install
this This package is react
clock So also install this package as
well which shows you the analog clock
here inside your reacts application You
also need to install this module as well
Almost 150,000 weekly downloads
So after we install this now we will
just create a simple
variable value and uh on change and for
this we'll be using the ustate hook and
initial value you can put any time here
I'm using 12 24hour format so this will
be 14 2:30 time and here wherever you
need to display the clock here uh the
time picker field so you just give it a
padding first of all of 20
pixel and uh then where you can actually
put a heading which will select time
24hour
format and then you simply use this
module time
picker and this actually takes some
options that we need to pass here First
option is your onchange event handler So
whenever you change the time this custom
function will execute So here we need to
define this function which is on change
inside your JavaScript So whenever you
choose any time this function will
execute on
change
So after this we will be also be
attaching the value which we defined
which is the current time
here this one we attaching
this So we don't need to define this
onchange because we already defined this
if you see on change So we just just
attaching this and it also takes an
option here format So what format here
Hour
minute mm If you also want to attach
second here you will also say SS So hour
minute second This is your time format
And if you want to disable
clock you can put either true or false I
will I need to show the clock So I will
say false So that's all that all these
options are there and after that uh we
can actually display whatever time the
user will select So selected time will
be located inside this variable which is
value So if you refresh your application
uh you will actually see this input
field appearing This is your time period
If you just click it then now it will
show you this is your minute clock and
if you adjust it you will see it will
adjust This is your second uh let's
suppose I set to 30 or we can change to
50 and this is your hour clock
here So as as you adjust the time here
it will return you the time here which
is
5:15 in this easy way you can see can
adjust your time
here So this is actually the module guys
If you want to integrate if you are
taking time input you can definitely use
this module which is react time picker
and uh which actually shows you with
this nice little clock as well as you
click All the source code is given in
the description of this video You can
refer to my blog
post and thank you very much for
watching this video and also check out
my website freeiatools.com which
contains thousands of tools regarding
audio video and image