Up next in 10
React.js DatePicker Component to Select Date & Time Using react-datepicker & date-fns Library
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:03
so in this video I will show you a react
0:05
just component for selecting date and
0:09
time input field so we have this nice
0:11
little demo right here and you will
0:13
allow you to Simply select whatever date
0:16
that you want to select this is a nice
0:18
little calendar date picker here you can
0:21
select
0:22
the whichever date that you want to
0:25
select and alongside with the time as
0:27
well in 24hour format
0:30
so once you select the time it will also
0:32
show you the time that you selected the
0:35
August 9 2023 plus
0:38
the so I'll show you how to pass this
0:42
after you selected the date how to
0:44
display it in the browser using reactjs
0:47
specific mod module here if you go to
0:50
npmjs.com just search for this package
0:53
which is react date picker this is
0:57
specifically built for this purpose so
1:01
that you can date picker component and
1:04
it's almost having 3 million weekly
1:06
downloads so this is actually the module
1:08
uh you just need to install
1:10
it so I'll show you a complete
1:14
example so apart from that we are also
1:17
using one other module for passing the
1:20
dates and displaying it which is called
1:23
as date.
1:25
FNS this is also a package which allows
1:28
you to manipulate the the date and time
1:30
and display it in the browser in
1:32
whichever format that you want so almost
1:36
26 million downloads is there so you
1:38
just need to install these two packages
1:40
so I'll show
1:43
you how to use this so step by step so
1:48
first of all just make a simple
1:50
functional
1:55
component and right at the very top we
1:57
need to import
2:00
the date picker modules so date
2:03
picker it will be imported automatically
2:06
also we need to import the CSS file for
2:09
this date picker so react dat picker dis
2:14
SL react date
2:22
picker do CSS so we also imported the
2:25
CSS file as well and also we will import
2:29
the date FNS module is that one such
2:32
method is there inside this format and
2:35
this will be coming from date FNS so we
2:38
have imported all the modules now we
2:41
inside we need to give some State
2:45
variables first for keeping track of
2:48
which state the user
2:50
select you just have a state variable
2:53
for this we'll be using the UST State
2:57
hook and we'll be having a new
3:02
date so initial value will be the
3:05
today's date so today date will be
3:08
selected using this date Constructor now
3:10
to show the date picker it's very easy
3:13
inside this div we'll just make sure
3:16
this div appears in the center position
3:18
so display flex and justify content to
3:21
be
3:23
Center so now inside this we have H2
3:26
heading which will say pick a data and
3:31
time so we have this date
3:36
picker so this take some options right
3:46
here uh I
3:48
think justifies
4:05
so now inside this date picker module if
4:07
you just uh do this it will just display
4:10
with the default options I think yeah
4:12
this is a field here if you click it you
4:14
will see the date picker appearing but
4:17
it also receiv some objects props that
4:20
you can pass first is the selected date
4:23
here you can provide the starting date
4:25
here so we are loading the today's date
4:29
so now now today's date will be shown to
4:31
you which is 12th of December 2024 it is
4:34
displaying in this input field so in
4:38
this way 11th of December sorry and now
4:43
it also takes a onchange event handler
4:45
so when you select a particular date
4:47
from the date picker this onchange event
4:50
handler will execute if custom function
4:53
you can attach so whenever you select a
4:56
date I will just attach this handle
4:59
change
5:00
I just want to Define this
5:05
function so the selected date will be
5:08
cons contained inside this function so
5:10
whatever date that you select so this
5:12
date will be passed
5:16
automatically so now the next parameter
5:19
is say if you also want to select the
5:21
time as well so it also have the option
5:23
show time select option as well so time
5:27
format you can provide whatever time
5:30
format I will say a 24h hour hour and
5:35
minute and then you can also select the
5:38
time
5:39
interval I will say
5:42
15 and you can even select the date
5:45
format as well just provide which format
5:47
of date that you want I want the month
5:50
then I want the
5:52
day so this is actually the format uh
5:56
time caption you can even give all these
5:59
options are
6:15
supported so after you do this you can
6:18
uh simply uh display the selected Time
6:22
by using the format function which is
6:24
available in this uh we passed the
6:27
actual date start date and then this
6:29
format so this format function is
6:31
available inside date.
6:34
FNS
6:36
so you will see selected date December
6:40
11 so now if I select any date uh this
6:43
function will execute handle change and
6:45
it will receive this you just need to
6:47
set the start date to whatever date is
6:51
selected that's all so if I now click on
6:55
this input field select any date 19th of
6:58
December you will see the date will
7:00
change and also if I want to change the
7:02
time you will see so in this way you can
7:07
integrate a date picker inside react
7:09
chairs using react date picker and also
7:11
pass your dates using this module date.
7:15
FNS so thank you very much for watching
7:18
this video and do check out my website
7:20
as well free mediat tools.com which
7:22
contains thousands of tools regarding
7:25
audio video and image and I will be
7:27
seeing you in the next video
#Software
#Time & Calendars