How To Convert Date To Another Time Zone Using Javascript in Laravel

admin_img Posted By Bajarangi soft , Posted On 01-02-2021

The Intl.NumberFormat() method is used to represent numbers in a language-sensitive formatting

How To Convert Date To Another Time Zone Using Javascript in Laravel

It’s really simple to convert a DateTime from one time zone to another in PHP. Just create a DateTime object using date & time to be converted as the first parameter and the original time zone as the second parameter. Then change the time zone to the desired one using the setTimezone method. That’s all!

$date = new DateTime('2018-04-11 12:00:00', new DateTimeZone('Europe/London'));
echo $date->format('Y-m-d H:i:sP') . "\n";

$date->setTimezone(new DateTimeZone('Europe/Bucharest'));
echo $date->format('Y-m-d H:i:sP') . "\n";
 output:
2018-04-11 12:00:00+01:00
2018-04-11 14:00:00+03:00

Step 1:Create Blade file like date.balde.php and make javascript code for coverting time zone .
resources/views/date.blade.php.
 
<html>
<head>
    <title>Age Calculator</title>
    <link rel='stylesheet' href='style.css'/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src='script.js'></script>

</head>
<br>
<body>
    <div id="main_container" class="container">
        <div class="row">       
            <div class="col-md-6">
                <button class="btn btn-success" onclick="changeTimezone()">
                    Change timezone
                </button>
             </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="age_container"><span id="exact" style="color: #3495e3"></span></div>
                <div id="age_container"><span id="exact1" style="color: #3495e3"></span></div>
                <div id="age_container"><span id="exact2" style="color: #3495e3"></span></div>

            </div>
        </div>
    </div>
    <script type="text/javascript">

        function changeTimezone() {

            let date =
                new Date(Date.UTC(2021, 0, 29, 3, 0, 0));
            console.log('Given IST datetime: ' + date);

            $('#exact1').text('Given IST datetime: ' + date);

            let usaTime =
                date.toLocaleString("en-US", {
                    timeZone: "America/New_York"
                });

            console.log('USA datetime: ' + usaTime);
            $('#exact2').text('USA datetime: ' + usaTime);

        }
    </script>
</body>
</html>

Related Post