Itsy Bitsy Bytes


on javascript

Changing the language for the Bootstrap Date Paginator plugin

At least once in every developer's life comes a moment when he must struggle with someone else's plugin. It does everything you need with close to no effort on your side, except for one tiny but very important thing. Sometimes, it's enough to simply read the manual but more often than not you need to get your hands dirty and make it do what you want!

Something like that happened to me (yet again) very recently, when I had to be able to change the language for the popular Bootstrap Date Paginator plugin made by Jon Miles.

I was not the only one asking for this, and while changing the language for MomentJS helped, it only work the first time. If the language was changed dynamically afterwards, the result was not reflected inside the plugin.

This stackoverflow answer put me on the right track but it was not enough. Finally, after quite a bit of fiddling, I found a solution: you had to change the language inside the _buildData method.

_buildData: function() {

    //(...) code skipped for brevity

    for (var m = start; m.isBefore(end); m.add('days', 1)) {

        /** ADDED BY ME **/
        if (this.options.language) {
            if (typeof m.lang === 'function') {
                m.lang(this.options.language);
            } else if (typeof m.locale === 'function'){
                m.locale(this.options.language);
            }
        }
        /** END ADDED BY ME **/

The plugin was using an older version of MomentJS originally, 2.4.0, where the language changing API was moment.lang('en'). However, I was using an up-to-date version, where the method changed to moment.locale('en'). The if inside the above code makes sure both versions work.

Since the options are not fixed, you can inject the language when you build the plugin:

var options = {  
    language: 'en',
    selectedDateFormat: 'YYYY-MM-DD'
}
$('#paginator').datepaginator(options);

The result can be check out here: Bootstrap Date Paginator language change demo. Just select a new language and watch the date language change right in front of your eyes :)

Finally, you can apply the patch yourself or simply use my version of the Bootstrap Date Paginator plugin.


Used to develop apps for iOS and Facebook for a short time, but now is a HTML5 developer, dealing mostly with Javascript.

comments powered by Disqus