How can I obtain the local time in jQuery?

Question

I am using jQuery and I need to get the local time for Germany.

Anyone coming to my website from any country should be able to know what time it is in Germany.

If the time is between 0:00 and 12:00 I need to make an alert reading: "Good Morning".

If the time is between 12:00 and 17:00 I need to make an alert reading: "Good Afternoon".

How can I implement this in jQuery?

Solution 1

You can get the local timezone offset of the client to get the GMT time and then add the offset hours of the Germany timezone (Central European Time GMT+1):

function getDate(offset){
  var now = new Date();
  var hour = 60*60*1000;
  var min = 60*1000;
  return new Date(now.getTime() + (now.getTimezoneOffset() * min) + (offset * hour));
}

//...

var dateCET = getDate(1); // Central European Time is GMT +1

if (dateCET.getHours() < 12) {
    alert ("Good morning.");
} else {
    alert ("Good afternoon.");
}

Update: I agree with @Josh, the above code is completely client dependent. Let's try to do it better:

$(document).ready(function(){
  var timezone = "Europe/Berlin";
  $.getJSON("http://json-time.appspot.com/time.json?tz="+timezone+"&callback=?",
    function(data){
      if (data.hour < 12) {
        alert ("Good morning in "+timezone);
      } else {
        alert ("Good afternoon in "+timezone);
      }
    })
});

We are now taking advantage of JSONP to do Cross-Domain requests to the jsontime server, this server exposes a complete JSON API to query time and timezone information.

You can play with the code here and you can explore the JSONP API here.

Hurray!, no server-side code!

Solution 2

Do you want to get the time in Germany, or the time for the user's timezone, wherever they are? If the latter, the Date() function defaults to work in the local timezone.

var d = new Date();    // defaults to the current time in the current timezone
if (d.getHours() < 12) {
    alert ("Good morning.");
} else {
    alert ("Good afternoon.");
}

Solution 3

You need to inject the date/time from your web server into a hidden field on the page, and then you can access that with jQuery and load the natural Javascript Date object. You do not want to rely on the client-side date/time because it is out of your control and could be set to something outrageous. Trust me.

Comments

[Josh Stodola]

Don't rely on client-side date/time. It can't be guaranteed accurate!

[OzeD]

What about the fact that the client is always right? As far as the user is seeing, their time is correct (even though it may be wrong). Getting the right time from another server will show the user the wrong time from their viewpoint.

[Josh Stodola]

Sorry to burst your bubble, my friend, but this is COMPLETELY unreliable. This is dependent on the client system clock, which could be set to something totally outrageous. Using the client clock has totally messed up apps for me in the past. Have to inject server-side date/time into hidden field!

[nickf]

ok, given the case stated in the OP, which is that it's being used for a simple "good morning/evening" greeting, this is ridiculous and over-the-top.

[Christian C. Salvadó]

@nickf: Yeah, could be, I just done it for fun!, and to do something with jQuery, as the OP asked :D...

[Josh Stodola]

nickf: 100% assurance that ALL users will have a similiar experience is NOT ridiculous nor over the top. In my world, it's absolutely mandatory.

[Muhammad Akhtar]

Hi CMS; you provide great solution. yesterday I have implemented this in my application and it work perfect. But when I test today, then I got problem when hitting this URL, Google App Requests over.... json-time.appspot.com/time.json?tz Now my concern is, this is not reliable service. What do you Suggest ? Or Can I get source code of that service, then I can upload it to my server and use service from my server instead I rely on another server. Thanks for your time. Please Advise....

[Mike Cole]

@nickf for realsies? Hidden fields are not rocket science.