Geek Answers Handbook

How to dynamically convert the value of input text (datepicker) using angular translation?

I use angular -translate to provide i18n to my application, I can correctly translate labels, button text, etc. The problem I am facing is when I try to change the date according to the selected locale. The date is selected from the date picker.

date is selected in the input element:

<input type="text" class="form-control" required="" ng-model="date" placeholder="{{ 'DATE_PLACEHOLDER' | translate }}" translate="{{ 'select_date'|translate:{date:date} }}"/>

A placeholder translation works fine, but when you change the language, no changes to the date format occur. I created plunkr describing the current scenario.

Plunker link

Please suggest a way in which I can translate pasted values ​​or text into forms. In addition, I would like to know how to overcome the flickering of key values ​​just before the page loads.

+6
source share
1 answer

  • Add Italian language, I copied it from http://forum.html.it/forum/showthread/t-2912577.html :

     $.fn.datepicker.dates['it'] = { days: ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica"], daysShort: ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab", "Dom"], daysMin: ["Do", "Lu", "Ma", "Me", "Gi", "Ve", "Sa", "Do"], months: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"], monthsShort: ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"], today: "Oggi", clear: "Cancella", weekStart: 1, format: "dd/mm/yyyy" };

  • Add map conversion for language codes from en_EN to en format:

     // language codes convertor map var convertorMap = { 'en_US': 'en', 'it_IT': 'it' };

  • In the language switch function, delete the current datepicker and initialize a new one with a new language, be sure to update the date in a new format:

     $scope.switchLanguage = function (key) { var dp = $('#datePicker'); // get current date var currentDate = dp.datepicker('getDate'); // update datepicker with new locale dp.datepicker('remove'); dp.datepicker({ autoclose: true, language: convertorMap[key] }); // restore current date according to the new locale dp.datepicker('update', currentDate); $translate.use(key); };

  • To show the view only after translation, change your wrapping element (I used <body> ) to look like this:

     <body ng-controller="Ctrl" class="ng-hide" ng-show="showView"> ..... </body>

    and in your controller:

     // will be fired when the service is "ready" to translate (ie loading 1st language) $translate.onReady(function () { $scope.showView = true; });

  • The ng-model directive on jQuery datepicker does nothing, so I deleted it and added the ng-model update code to the datepicker initial function:

     $('#datePicker').datepicker({ autoclose: true }) // update ng model .on('changeDate', function(e) { $timeout(function () { $scope.date = $('#datePicker').datepicker('getUTCDate'); }); });

if you see in the console message, for example:

pascalprecht.translate. $ translateSanitization: sanitization strategy not configured. This can have serious safety implications.

it is said to be fixed in the following releases: https://github.com/taigaio/taiga-front/issues/778

plunker: http://plnkr.co/edit/EGtHPG?p=preview

+2
source

More articles:


All Articles