I have just uploaded the first version of xtz. xtz, shorthand for cross timezone, is a script that converts times on your page to the users local time. So you could replace something like “27 January, 2000 10:00:00 CST” with “27th January, 2000 at 4:00pm” if the user is in the UK. If the user is in the CST timezone then you would have something like this “27th January, 2000 at 10:00am”.
So here is a really simple example as to how you use it. First off you start out with your dates within elements. I am using span tags within a paragraph because that is probably one of the most common places.
<p>The London 2012 Olympic games will begin on <span id='olympics-date' data-format='dddd [the] Do [of] MMMM [at] h:mma'>27 July 2012, 21:00:00 GMT</span>.</p>
As you can see I am specifying an ID to access it with, this can be anything you want, and a date format for the parsed date to be outputted with. When converted this will output the following for users in the CST timezone.
The London 2012 Olympic games will begin on Friday the 27th of July at 3:00pm.
Now to make this date actually get executed you are going to first need two scripts. The first is moment.js for the date parsing and the second is the actual xtz script. You need to load these two scripts before your own code. xtz supports AMD too if thats how you want to do it. Once done you setup an instance of
xtz.DateConverter and run it. If you want to then you can easily swap out moment.js for any other date library, it just requires a tiny bit of configuration.
I am using the ID to fetch a single element in this example. Although you can also pass an array of elements. So if you are using MooTools or jQuery you can use their selector engines to make it a lot easier.
This is a very new library although I have put a lot of thought into it. So any feedback is greatly appreciated. Feel free to leave a comment below or open an issue in the repository.