Last time I wrote about marrying up Twitter.Bootstrap.MVC4 and Bootstrap Datepicker. It came together quite nicely but when I took a more in depth look at what I'd done I discovered a problem. The brief work on regionalisation / internationalisation / localisation / globalisation / whatever it's called this week... wasn't really working. We had problems with the validation.
I also discovered that Stefan Petre's Bootstrap Datepicker appears to have been abandoned. Andrew Rowls has taken it on and created a GitHub repository for it here. Besides bug fixes he's also introduced the ability for the Bootstrap Datepicker to customised for different cultures.
Since these 2 subjects are linked I tackled them together and thought it might be worth writing up here. You can find the conclusion of my work in a GitHub repository I created here.
Going global down in Acapulco
First step in internationalising any ASP.Net web app is adding the following to the
Then I pulled Globalize and the Andrew Rowls fork of Bootstrap Datepicker into the project (replacing Stefan's original assets). As well as this I pulled in the
Culture-specific script bundles
_BootstrapLayout.basic.cshtml has been amended to make use of the new bundles and also to include a meta tag that will used to drive regionalisation:
To illustrate how this works, a German user running a machine with the de-DE culture would be served up the following 2 files:
Where have we got to?
With all this done we have now fixed the validation issues we were experiencing previously. This was done by including the Globalize library, the accept-language meta tag and the jQuery Validate Globalize extensions.
Besides this we've laid the groundwork for introducing internationalised datepickers by introducing Andrew Rowls fork of the Bootstrap Datepicker. That's what we'll do next...
International Bootstrap Datepicker
The final steps of switching over to using a culture-specific date picker are achieved by making a change to the Scripts section in the
Create.cshtml file. The existing (and very simple) section should be replaced with this:
The script above takes the region from the accept-language meta tag and attempts to look up an associated "language" for the Bootstrap Datepicker. If it finds one it uses it, if not then the default language of "en" / English will be used.
In this post we:
- fixed the validation issues we'd introduced by marrying up Twitter.Bootstrap.MVC4 and the Bootstrap Datepicker
- switched over to using the Andrew Rowls fork of Bootstrap Datepicker and made use of the internationalisation functionality it exposes.