live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
React.js Luxon Tutorial to Find Timezones of Countries and Format Dates in Browser
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so I
0:02
will introduce to a new package in react
0:04
Chase which allows you to change your
0:06
date and time to any time zone in the
0:09
world so if you want to convert your
0:11
local time to any country's time or time
0:14
zone you can use this package which is a
0:16
daytime specific Library luxen luux o n
0:22
if you just go to npmjs.com and just
0:24
search for this
0:27
package the spelling is luu x o n luxon
0:32
it's
0:34
a date Library I
0:42
think so the very first link which
0:44
appears this is actually the command to
0:46
install this and almost it is having 10
0:49
10 million weekly downloads it's pretty
0:52
popular Library the main uses of this
0:55
library is to par format your dates and
0:58
convert the time zone to different
1:00
countries so this is actually the
1:02
application I built I'm just showing the
1:05
current date and time which is my local
1:08
time so we have these two buttons out
1:10
there if you want to change to London
1:13
time or new New York time so we have
1:15
these two buttons If I click this button
1:17
it the time will be changed to UK time
1:21
which is London if I want to change it
1:23
to us New York time so I will simply
1:26
click and it will Now display the time
1:28
which is inside new New York so this is
1:32
kind of a simple application now to get
1:35
started just create a simple functional
1:38
component and to use this we just import
1:41
the package first of all by using the
1:43
import
1:44
function and we have this date time
1:48
function available from luxon we are
1:49
importing it using the import
1:52
statement and now we just need
1:56
to use this so it'll be displaying the
1:59
current date and
2:02
time so we can easily display the
2:05
current date and
2:10
time inside these cly brackets we simply
2:13
say current so for this we do need to
2:16
declare a state variable for
2:19
this simply
2:22
say
2:24
current date time Set current date time
2:28
and using the U state for this and we'll
2:32
be using the date
2:34
time it this class it contains this
2:37
function now it will basically show the
2:40
current date and time so here we can
2:42
simply show this variable in the
2:45
jsx and then convert this into local
2:49
string and then inside this path date
2:52
time dot date
2:57
time so what happens if you refresh it
3:01
will show you the current date and time
3:03
in this
3:04
format so we add two buttons here to
3:08
actually change this date and time and
3:10
time zone to two different countries to
3:13
London and New York so we have basically
3:17
passing this on click listener to this
3:19
custom function that we will Define and
3:21
we are passing these two different time
3:23
zones so you can add more buttons as
3:26
well for changing to different countries
3:29
so we have Pro providing these time
3:31
zones so now we just need to Define this
3:34
function handle change time
3:41
zone so we basically get the time zone
3:44
as an argument passed so inside this we
3:47
need to construct the new date and time
3:49
for doing this we take the current date
3:51
and time and it contains a function set
3:55
Zone and we set this to the this time
3:58
zone and then
4:00
we set the current date and time to this
4:03
new date and
4:10
time so basically what we are doing we
4:13
are using this date time function which
4:15
is coming from this package luxon if you
4:18
see it contains this function which
4:20
contains the current date and time then
4:22
it then it
4:25
actually uh contains this function
4:32
basically this function to set the time
4:35
zone to this time zone which is selected
4:37
and then
4:39
lastly if you refresh now what it will
4:43
do if I click this button now it will
4:45
change the time to this current country
4:49
again if I click to new New York it will
4:51
change the time it's a very simple
4:53
application related to date and time if
4:56
you want to find out a specific date and
4:58
time in any country you can use this
5:01
package in react CHS very simple
5:04
app but I wanted to show you this
5:07
examples so thank you very much for
5:09
watching this video and do check out my
5:12
website as well free mediat tools.com
5:15
which contains thousands of tools
5:17
regarding audio video and image and I
5:20
will be seeing you in the next video