In this article I will discuss and demonstrate how to deal with dates in a localized application. We will look at the dojo.locale() library and discuss how localization affects dates in XPages.
Background
Dates in JavaScript – nasty horrible things, to be avoided at all costs. So much so that there are a number of date handling specific libraries including moment.js and date.js. In addition to these two Dojo has it’s own built in date parsing library and that can also be utilized with multiple languages (localization) and the jQueryUI datepicker functionality also allows for date formatting. So we have a number of options depending on how we want to utilize the available resources.
Localization
Localization is the fancy term for making your application multilingual. For a more in depth look at how to do that at the application level check out http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPageLocaleTimezone.htm or go see Brad and Kathy at this year’s connect14.
When you turn localization on within your XPages application (R9 – Application properties / Design /International Options) the server generates a dojoConfig.locale variable at the top of your XPages webpage.
This gives us programmatic access to the language at anytime.
For those interested the actual language is passed to the server through the header information when requesting the page. In this case I am telling the server that I was one of three languages (should the application support them)
- en, en-us (american english)
- fr (french)
- de (german)
Within the XPages international options I can specify the languages – and the server will send out the first language supported by the application which coincides with what the browser is asking for.
So if the application supports french, dutch and german – I will get a french page served to me because that comes before german in my list of languages.
Most Americans who have never had to deal with this are thinking – who cares everyone uses mm/dd/yyyy right??? And they would be wrong. Almost nobody else deals with mm/dd/yyyy and if you manually validate mm/dd/yyyy for an international application you will fail in other countries.
Dojo
In XPages we get dojo out of the box and with that we get date formatting functions. The dojo/date/locale() “Creates a string from a Date object using a known localized pattern.“. It is really rather nice and simple and as you can see from the documentation page there are *many* different formats in which you can return the date.
I needed to display the day of the week, month, day number and year at the top of a page, so I created my own date translation function in the code as follows. What this function does is that it accepts a date object and a pattern. The function then returns a string based on the pattern.
require(["dojo/date/locale"]) function formatLocaleDate(date, pattern){ //example formatLocaleDate(date, "EEE MMM d yyyy") return dojo.date.locale.format( date, { selector: 'date', formatLength: "short", locale: dojoConfig.locale, datePattern: pattern } ) };
So in this case the example given would return
“lun jan 13 2014” in french
“mon jan 13 2014” in english
But this still does not determine if mm/dd/yyyy is a valid format in your date field.
Here is the simple date test for that.
If you try the following and dojoConfig.locale = ‘en-us’ you will not pass. But in ‘fr’ you will get a date object.
var temp = dojo.date.locale.parse('20/12/2013', { locale: dojoConfig.locale, formatLength: "short", selector: "date" }) if(temp){ console.log('pass') }
The REST service
A rest service date field comes along in ISO format
[ { "@entryid":"1-AE3FB4C32057B87C85257C22000A83DD", "firstname":"Alfred", "lastname":"Hall", "address":"2139 Jail Drive", "state":"IL", "city":"Tremont", "noteid":"NT0000BD22", "lastMod":"2013-12-20T06:00Z" //ISO date format },
and because of that it is language independent (smart that). So if we want to turn that into something appropriate for the french (dd/mm/yyyy) or american (mm/dd/yyyy) we have to use the dojo locale library.
var temp = new Date('2013-12-20T06:00Z') temp = dojo.date.locale.format(temp,{ selector: "date", formatLength: "short" });
In American English we get : “12/20/2013”
In french we get : “20/12/2013”
In this way we get the correct formatting without having to write code in each language.
Conclusion
How ever you are dealing with date formatting, date validation or REST service JSON data (in my case in Ext JS) there are dojo date formatting functions available for free on the server. If you need localization then even better because you life is may significantly simpler than it would otherwise be.
PS
Before anyone starts to have a go about ooo Marky used Dojo….?!?! Yeah I did, because it made sense to meet the requirement. Would I use Dojo to meet this requirement in a non-XPages application? Probably not 🙂