https://github.com/olical/xtz
Localize your pages times
https://github.com/olical/xtz
Last synced: 4 months ago
JSON representation
Localize your pages times
- Host: GitHub
- URL: https://github.com/olical/xtz
- Owner: Olical
- Created: 2012-05-21T11:49:19.000Z (about 13 years ago)
- Default Branch: master
- Last Pushed: 2012-05-21T11:57:38.000Z (about 13 years ago)
- Last Synced: 2025-01-05T02:10:21.362Z (6 months ago)
- Language: JavaScript
- Size: 105 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# xtz - Localize your pages times
xtz is a library for converting dates on your page to the users local time. It supports any date library through a date interface which is incredibly easy to set up. All you have to do is pass it your elements and it will convert them to the local time found in the browser.
To get started have a look at the quickstart section below. For a more in depth understanding I recommend browsing the source in `xtz.js` or `testing.html`.
## Quickstart
This will guide you through setting up xtz as quick as possible. It will use [moment.js](http://momentjs.com/) as it's date library. Check the dependencies section if you would like to use something else.
First include your scripts, first moment and then xtz. I would recommend placing these at the bottom of your body tag but above your code that will execute it. You will obviously have to download the scripts and correct their paths.
Now in your code you can initiate an instance of `xtz.DateConverter`.
var converter = new xtz.DateConverter();
All you have to do now is execute it. I am using the [MooTools](http://mootools.net/) selector engine to find the elements but you can use anything you want. You can pass an array of elements or a single element.
converter.run($$('span.my-date'));
Now in your HTML, any date in a span with a class of `my-date` will be converted to the local time. It will be converted to the default date format: `Do MMMM, YYYY [at] h:mma`. To change this you can either pass false for the custom interface and then a string like so.
var converter = new xtz.DateConverter(false, 'YYYY HH:mm');
Or you can specify `data-format` on the individual elements. So here are a couple of example date elements.
27 January, 2000 10:00:00 CST
27 January, 2000 10:00:00 CST
## Dependencies
The script only requires a date library. By default it is configured to use [moment.js](http://momentjs.com/) if it's present in the page, if it isn't you can just configure your own as I have in `testing.html`. In there you can see that I have set up an instance to use [XDate](http://arshaw.com/xdate/). Here is the code I use in this test.
// Set up the interface
var xdateInterface = new xtz.DateInterface(
function(date) {
// Parsing
return XDate(date);
},
function(date, format) {
// Formating
return date.toString(format);
},
function(date) {
// Validating
return date.valid();
}
);
// Create a new date converter using the interface
// Also specify a default formatting string
var customInterface = new xtz.DateConverter(xdateInterface, 'dd MMMM, yyyy \'at\' h:mmtt');
// Now run it on the elements using MooTools' selector engine
customInterface.run($$('.date-custom-interface'));
By copying and editing the code above you can integrate it with any library that can parse, format and validate a date.
## Browser compatibility
I test it at the moment by running `testing.html` in [BrowserStack](http://www.browserstack.com). It works perfectly in all modern browsers as well as IE6+. Please bear in mind that these tests only use moment.js and XDate. If it isn't working and you are using some other library then it is probably that date library or your config. Not xtz.
## License
[](http://creativecommons.org/licenses/by/3.0/)
xtz by [Oliver Caldwell](http://oli.me.uk) is licensed under a [Creative Commons Attribution 3.0 Unported License](http://creativecommons.org/licenses/by/3.0/).