JavaScript Create Date With TimeZone

Hello,

Recently in one of my project we faced lots of issues regarding in correct dates displayed to users. The problem was TimeZone. A user is in India but he don't know that he has set timezone to USA timezone and hence we get user's device date it was showing wrong date and time.

We asked our users to fix it but as we know end users are always unpredictable they still set the timzone to USA or others and keep complaining us about dates and times.

So here is what we did to fix this issue.

Step 1 : Get User's Current Location

You can use HTML 5 GeoLocation.

if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(gotUserPosition);
}

Step 2 : From the Latitude and Longitude, get user's current timezone using Google API.

function gotUserPosition(position){

     Ext.Ajax.request({
            url: 'https://maps.googleapis.com/maps/api/timezone/json?       location='+ position.coords.latitude +','+position.coords.longitude+'&timestamp='+parseInt(Date.now()/10)+'&key=YOUR_KEY',
            method: 'GET',
            disableCaching: false,
            success: function(response) {
                var result = Ext.decode(response.responseText);
                if(result.status == 'OK'){
                    localStorage.setItem('time_offset',result.rawOffset);
                    localStorage.setItem('timeZoneId',result.timeZoneId);
                }
            },
            failure: function(response) {
             
            },
            scope: this
     });

}

For this you have to create a Google API project and enable timezone API and add your key in stead of YOUR_KEY

As you can see above we are sending user's latitude and longitude to google maps api and getting the result. If result is OK. then we are saving time offset to local storage.

Now this time offset is the offset in number of seconds from UTC time. For example Indian Standard Time is ahead of UTC for 5 hours and 30 minutes. So here my offset will be 19800 seconds which is 5 hours and 30 minutes.

Now use the following logic to create date object.


var utcDate = (new Date()).toISOString();
var offsetHours = parseInt(Number(localStorage.getItem('time_offset'))/60/60);
var offsetMinutes = parseInt(Number(localStorage.getItem('time_offset'))/60%60);

var currentDate = new Date(Date.UTC(Number(utcDate.split('T')[0].split('-')[0]), Number(utcDate.split('T')[0].split('-')[1]) - 1, Number(utcDate.split('T')[0].split('-')[2]), (Number(utcDate.split('T')[1].split(':')[0]) + Number(offsetHours)), (Number(utcDate.split('T')[1].split(':')[1]) + Number(offsetMinutes)),0));

function z(n){return (n < 10? '0' : '') + n;};

var currentDateString = currentDate.getUTCFullYear() + '-' + z(currentDate.getUTCMonth() + 1) + '-' + z(currentDate.getUTCDate());

So above logic about creating UTC date and then adding number of hours and minutes to it to get desired date and time in UTC timezone. So virtually it's UTC date and time but since we added offset it will show you local date and time.

Hope this helps you.