CODEWITHSUNDEEP
javascriptdatetimetimetimezone
frankadelic
frankadelic

Reputation: 20803

Displaying date/time in user's timezone - on client side

I have a web application that displays datetime stamps on every page, for example:

December 12, 2009 6:00 pm

I would like to dynamically detect the user's timezone and alter the display using JavaScript.

So the New York user would see:

December 12, 2009 6:00 pm

While the California user would see:

December 12, 2009 3:00 pm

Any suggestions?

Upvotes: 11

Views: 26922

Answers (4)

James Stevens
James Stevens

Reputation: 429

I know you asked this a LONG time ago, but this seems to me a common requirement and I just had the much same problem. I followed lots of different references and never found a solution as easy as the one I am now using.

My servers use MySQL & store the D&T in UTC (of course!). So the D&T coming out of the database looks like YYYY-MM-DD HH:MM:SS and I want the user to see their local time, in their local format!

Here's my solution - wrap the MySQL D&T string in one of these two functions to get the D&T, or date only, in the user's local format, in the user's local time.

function local_dt(date_time)
{
    d = new Date(date_time+" UTC");
    return d.toLocaleString();
}

function local_date(date_time)
{
    d = new Date(date_time+" UTC");
    return d.toLocaleDateString();
}

Where the date_time parameter is the string from MySQL, e.g.

console.log(local_date(user.created_dt));

Works for me.

I tried putting it all into one line, e.g. Date("2022-06-25 16:15:01 UTC").toLocaleString(), but that didn't work & I'm not expert enough in JS (or bored enough) to try & work out why.

Upvotes: 3

Nenad Dobrilovic
Nenad Dobrilovic

Reputation: 1565

We are using ExtJS library, which has functionalities regarding date and time which can help you a lot. As a matter of fact, on my Mozilla Firefox, it displays all dates and times according to the browsers time zone.

Upvotes: 1

Schwern
Schwern

Reputation: 165536

You can use Date.getTimeZoneOffset() to get the local offset from GMT.

var date = new Date();
var offset = date.getTimezoneOffset();

From there its a SMOP. Using the Javascript Date object you can call date.toDateString to get a human readable date. If you need it server side, have the Javascript send the offset to your server with a GET or POST.

Formatting the date is another story. Javascript doesn't provide much built in. You could hack it up yourself, but that way bugs and madness lies. Date formatting is something any good Javascript library should provide. For example, JQuery has Datepicker.formatDate.

Upvotes: 8

Doug Neiner
Doug Neiner

Reputation: 66221

Here is how you could do it with the wonderful "progressive enhancement":

Output the date where you want it to appear, but be sure to specify its timezone (I use GMT here, but you could use UTC, etc). Then swap it out with the local time on load (Automatically handled by JavaScript if the original timezone is provided).

<div id="timestamp">December 12, 2009 6:00 pm GMT</div>
<script type="text/javascript">
    var timestamp = document.getElementById('timestamp'),
        t         = new Date(timestamp.innerHTML),
        hours     = t.getHours(), 
        min       = t.getMinutes() + '', 
        pm        = false,
        months    = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    if(hours > 11){
       hours = hours - 12;
       pm = true;
    }

    if(hours == 0) hours = 12;
    if(min.length == 1) min = '0' + min;

    timestamp.innerHTML = months[t.getMonth()] + ' ' + t.getDate() + ', ' + t.getFullYear() + ' ' + hours + ':' + min + ' ' + (pm ? 'pm' : 'am');
</script>

Upvotes: 6

Related Questions