Dynamically change the Language of Angular Bootstrap Datepicker

Question

I am having a hard time in creating this code. What I used was

 $scope.convertToLanguage = function ($language) {
     var fileref = document.createElement("script");
        fileref.setAttribute("type", "text/javascript");
        fileref.setAttribute("src", "whatever the filename is");

        if (typeof fileref != "undefined") {
            document.getElementsByTagName("head")[0].appendChild(fileref)
        }
  }

I tried to make the source dynamic by loading either of these locales

<script src = "angular-locale_de-de.js"> </script>
angular-locale_es-es.js
angular-locale_it-it.js
angular-locale_fr-fr.js

The script loads. However, the language does not change. As I read from previous questions we use the Locales(s) to convert the language of the picker.

I want to change the language in my "**ng-click**" event.

Please help.

score 2 · Answer 1 · answered Dec 19 '14 at 08:17

Unfortunately I wasn't able to do it with i18n. However, I got it right by modifying the angular bootstrap itself (the datepicker part) you'll see it in the controller. I used a javascript array then performed conditionals using case then I called the respective months/days in different language from my array. Check this out.

this.modes = [
  {
      name: 'day',
      getVisibleDates: function (date, selected) {

          var year = date.getFullYear(), month = date.getMonth(), firstDayOfMonth = new Date(year, month, 1);
          var difference = startingDay - firstDayOfMonth.getDay(),
          numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : -difference,
          firstDate = new Date(firstDayOfMonth), numDates = 0;

          if (numDisplayedFromPreviousMonth > 0) {
              firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
              numDates += numDisplayedFromPreviousMonth; // Previous
          }
          numDates += getDaysInMonth(year, month + 1); // Current
          numDates += (7 - numDates % 7) % 7; // Next

          var days = getDates(firstDate, numDates), labels = new Array(7);
          for (var i = 0; i < numDates; i++) {
              var dt = new Date(days[i]);
              days[i] = makeDate(dt, format.day, (selected && selected.getDate() === dt.getDate()     && selected.getMonth() === dt.getMonth() && selected.getFullYear() === dt.getFullYear()), dt.getMonth() !== month);
          }

          //I Edited this part
          for (var j = 0; j < 7; j++) {
              labels[j] = global.shortDays[j];
          }


          monthDisplay = dateFilter(date, format.dayTitle);

          var e, f, i, s;

          for (var i = 0; i < 12; i++) {
              if (global.languageValidator === "de") {

                  monthDisplay = monthDisplay.replace(global.defaultMonths[i], global.germanMonths[i]);
                  monthDisplay = monthDisplay.replace(global.frenchMonths[i], global.germanMonths[i]);
                  monthDisplay = monthDisplay.replace(global.italianMonths[i], global.germanMonths[i]);
                  monthDisplay = monthDisplay.replace(global.spanishMonths[i], global.germanMonths[i]);
              }
              else if (global.languageValidator === "fr") {

                  monthDisplay = monthDisplay.replace(global.defaultMonths[i], global.frenchMonths[i]);
                  monthDisplay = monthDisplay.replace(global.germanMonths[i], global.frenchMonths[i]);
                  monthDisplay = monthDisplay.replace(global.italianMonths[i], global.frenchMonths[i]);
                  monthDisplay = monthDisplay.replace(global.spanishMonths[i], global.frenchMonths[i]);

              }
              else if (global.languageValidator === "it") {

                  monthDisplay = monthDisplay.replace(global.defaultMonths[i], global.italianMonths[i]);
                  monthDisplay = monthDisplay.replace(global.germanMonths[i], global.italianMonths[i]);
                  monthDisplay = monthDisplay.replace(global.frenchMonths[i], global.italianMonths[i]);
                  monthDisplay = monthDisplay.replace(global.spanishMonths[i], global.italianMonths[i]);

              }
              else if (global.languageValidator === "es") {
                  monthDisplay = monthDisplay.replace(global.defaultMonths[i], global.spanishMonths[i]);
                  monthDisplay = monthDisplay.replace(global.germanMonths[i], global.spanishMonths[i]);
                  monthDisplay = monthDisplay.replace(global.frenchMonths[i], global.spanishMonths[i]);
                  monthDisplay = monthDisplay.replace(global.italianMonths[i], global.spanishMonths[i]);
              }
          }



          //return { objects: days, title: dateFilter(date, format.dayTitle), labels: labels }; //orignal return
          return { objects: days, title: monthDisplay, labels: labels }; //modified return
       //until here

      },
      compare: function (date1, date2) {
          return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));
      },
      split: 7,
      step: { months: 1 }
  },
  {
      name: 'month',
      getVisibleDates: function (date, selected) {
          var months = new Array(12), year = date.getFullYear();
          for (var i = 0; i < 12; i++) {
              var dt = new Date(year, i, 1);
              //months[i] = makeDate(dt, format.month, (selected && selected.getMonth() === i && selected.getFullYear() === year));

              //Modified by AARON

              if (global.languageValidator === "de") {
                  months[i] = makeDate(dt, format.month, (selected && selected.getMonth() === i && selected.getFullYear() === year));
                  months[i].label = global.germanMonths[i];
              }
              else if (global.languageValidator === "fr") {
                  months[i] = makeDate(dt, format.month, (selected && selected.getMonth() === i && selected.getFullYear() === year));
                  months[i].label = global.frenchMonths[i];
              }
              else if (global.languageValidator === "it") {
                  months[i] = makeDate(dt, format.month, (selected && selected.getMonth() === i && selected.getFullYear() === year));
                  months[i].label = global.italianMonths[i];
              }
              else if (global.languageValidator === "es") {
                  months[i] = makeDate(dt, format.month, (selected && selected.getMonth() === i && selected.getFullYear() === year));
                  months[i].label = global.spanishMonths[i];
              }
              else
              {
                  months[i] = makeDate(dt, format.month, (selected && selected.getMonth() === i && selected.getFullYear() === year));
              }
              //console.log("Label = " + months[i].label);

          }
          //console.log({ objects: months, title: dateFilter(date, format.monthTitle) });
          return { objects: months, title: dateFilter(date, format.monthTitle) };

      },
      compare: function (date1, date2) {
          return new Date(date1.getFullYear(), date1.getMonth()) - new Date(date2.getFullYear(), date2.getMonth());
      },
      split: 3,
      step: { years: 1 }

  },

Jscti · Answer 2 · 2014-12-11T10:16:31.707

1

I suggest you to use the angular-translate module that will help you transition between locales easily.

You'll be able to reference any translations files you need and load asynchronously the one you need at will. For that you'll also need the optionnal angular-translate-loader-static-files plugin.

Example :

$translateProvider.useStaticFilesLoader({ // reference any locale-xxxxx.json locale file
    prefix: 'locale-',
    suffix: '.json'
});
$translateProvider.preferredLanguage('en'); // use "en" by default
$translateProvider.determinePreferredLanguage(); // automatically determine best locale from browser config
$translate.use('de'); // force the use of "de" at runtime

More that that, this plugin as tons of usefull functionnalities around i18n. I use it on all my project even If I have only one locale available ;)

See demo on : http://angular-translate.github.io/docs/#/guide/07_multi-language (

Hope that helps

edited Dec 11 '14 at 10:16

answered Dec 11 '14 at 08:28

Jscti

14,096
4
62
87

Hi Cetia, if you have some time could you please give a working example together with the html file? If there is a working plunker I would very much appreciate it. Anyway, thanks! – PipeMan Dec 11 '14 at 10:13
You can find tons of example on the doc of angular-translate : for example at the bottom of the page here : http://angular-translate.github.io/docs/#/guide/07_multi-language – Jscti Dec 11 '14 at 10:15
wait, can the language of angular bootstrap's datepicker be changed using angular-translate? – Aniket Sinha Dec 11 '14 at 10:34
Yes but you'll have to overload the template to use angular-translate directives instead. See http://stackoverflow.com/questions/17660947/can-you-override-specific-templates-in-angularui-bootstrap (I personnaly use the 2nd answer pattern with html2js) – Jscti Dec 11 '14 at 10:41
1

Ahh, now that's a perfect solution. – Aniket Sinha Dec 11 '14 at 10:52

Dynamically change the Language of Angular Bootstrap Datepicker

2 Answers2