Home >
A few days ago I was looking at a site and noticed it did something cool. For all event dates and times, the application would rewrite the values into the user's local timezone. I knew this was being done with JavaScript, which can sniff the client's timezone, but the code behind the application was pretty poorly written. (If I view source and see 3-4 extremely long lines of unbroken HTML, I just turn away.) I decided to take a stab at writing this code myself to see how difficult it would be.
I knew that the "find dates and rewrite" aspect would be trivial with jQuery. What concerned me more was parsing the date and time into something that could be modified for the local user. I did some search and came across Datejs. As you can probably guess, this is a JavaScript library of handy data related functions. This ended up working perfectly for me, but let me share an important warning. If you decide to use this library, do not use the main download. Instead, use the download from the library's source repository (located here).
Ok, so I began with a simple HTML file and some hard coded date/time strings.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
})
</script>
</head>
<body>
<table border="1">
<tr>
<td><span class="adate">December 25 2:00 PM EST</span></td>
<td>Date 1</td>
</tr>
<tr>
<td><span class="adate">December 16 1:00 PM PST</span></td>
<td>Date 2</td>
</tr>
<tr>
<td><span class="adate">December 1 2:00 PM CST</span></td>
<td>Date 3</td>
</tr>
<tr>
<td><span class="adate">December 1 11:00 PM PST</span></td>
<td>Date 4</td>
</tr>
</table>
I begin with a simple table and four sample dates. Note that each one includes the time zone. Now I need to get the values. I've already got a document.ready block so my first step was to get the dates:
$(".adate").each(function() {
var datestr = $(this).text()
var dateOb = Date.parse(datestr)
I've got a simple selector and for each match I get the text value. I then use Datejs's parse function. At this point I decided to simply print out the result from the Datejs object. Datejs includes a fancy format function (which works very simular to ColdFusion's dateFormat function). I used this to format the date in the same (well, close to the same, I added a year in there I should probably add to the original as well) form as the original:
newDateStr = dateOb.toString('MMMM d, yyyy h:mm tt')
$(this).text(newDateStr);
And get this - not only did this display the dates correct, it also had them in my timezone (CST)! Notice the fourth date is on December 1st at 11PM in the Pacific timezone. When rendered in my browser it came out as December 2nd, 1AM. Perfect and incredibly simple.
I decided on one more change. The site that did this auto-format didn't actually advertise that they were. How is a user supposed to know that the timezone isn't local to the event? I actually assumed the timezones were local to the event's location, not me. With this in mind I made another tweak. If the code is run and actually finds dates to modify, I'll remember it and add a little note. Here is the complete script with that new modification. This will help alert the user that the times are local to him, not the event.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="/jquery/date/date.js"></script>
<script>
$(document).ready(function() {
doneone = false
$(".adate").each(function() {
var datestr = $(this).text()
var dateOb = Date.parse(datestr)
newDateStr = dateOb.toString('MMMM d, yyyy h:mm tt')
$(this).text(newDateStr);
doneone = true
})
if(doneone) {
$("#notice").text("Notice: Dates have been updated to match your current timezone.")
}
})
</script>
</head>
<body>
<table border="1">
<tr>
<td><span class="adate">December 25 2:00 PM EST</span></td>
<td>Date 1</td>
</tr>
<tr>
<td><span class="adate">December 16 1:00 PM PST</span></td>
<td>Date 2</td>
</tr>
<tr>
<td><span class="adate">December 1 2:00 PM CST</span></td>
<td>Date 3</td>
</tr>
<tr>
<td><span class="adate">December 1 11:00 PM PST</span></td>
<td>Date 4</td>
</tr>
</table>
<div id="notice"></div>
Here is the output:
And what's cool is - if you disable JavaScript, you still get something workable:
Pretty simple, right? Unfortunately the timezones were off in my Mac Chrome browser. Maybe it's a bug in Chrome. It worked perfectly in both Safari and Firefox. I can also say that I did not test with time zones out of America.
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
"but let me share an important warning. If you decide to use this library, do not use the main download. Instead, use the download from the library's source repository"
why?
@Dave: Ah, sorry. I should have made it clear. The main download is old and doesn't work with the samples provided.
@Ray
The requested URL /p/datejs/source/checkout/ was not found on this server.
Remove the trailing / and it works.
Thanks!
On every site there is something good and something that we don't need.
Intersting! I make only the first steps in programming. I need to know it for my job.
I want to express my deep gratitude to the developer of this script, it is very helped me in my work!
it's a shame that banks and credit card companies that allow payments to be made by a certain time don't use something like this to allow everyone in each timezone to complete a payment in a specific time for that zone - like 5PM EST or 5 PM PST. I like it. - Sarong
I wonder if I could implement this on my link building application? Keeping the mobile version running on the users timezone ... now you've got me thinking!