如何使用angular-translate动态翻译输入文本(datepicker)值?

Ris*_*abh 6 datepicker angularjs angular-translate

我正在使用angular-translate为我的应用程序提供i18n,我能够正确翻译标签,按钮文本等.我面临的问题是当我尝试根据所选语言区域设置更改日期时.日期从日期选择器中选择.

日期被选入输入元素:

<input type="text" class="form-control" required="" ng-model="date" placeholder="{{ 'DATE_PLACEHOLDER' | translate }}" translate="{{ 'select_date'|translate:{date:date} }}"/>
Run Code Online (Sandbox Code Playgroud)

占位符转换工作正常,但是当我更改语言时,日期格式没有发生变化.我创建了一个描述当前场景的plunkr.

Plunker Link

请建议一种方法,我可以在其中翻译插入的值或表单中的文本.此外,我想知道如何在加载页面之前克服键值的闪烁.

And*_*riy 2

    \n
  1. 添加意大利语区域设置,我从http://forum.html.it/forum/showthread/t-2912577.html复制它:

    \n\n
    $.fn.datepicker.dates[\'it\'] = {\n  days: ["Domenica", "Luned\xc3\xac", "Marted\xc3\xac", "Mercoled\xc3\xac", "Gioved\xc3\xac", "Venerd\xc3\xac", "Sabato", "Domenica"],\n  daysShort: ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab", "Dom"],\n  daysMin: ["Do", "Lu", "Ma", "Me", "Gi", "Ve", "Sa", "Do"],\n  months: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"],\n  monthsShort: ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"],\n  today: "Oggi",\n  clear: "Cancella",\n  weekStart: 1,\n  format: "dd/mm/yyyy"\n};\n
    Run Code Online (Sandbox Code Playgroud)
  2. \n
  3. 将语言代码的转换映射从en_EN格式添加为en

    \n\n
    // language codes convertor map\nvar convertorMap = {\n  \'en_US\': \'en\',\n  \'it_IT\': \'it\'\n};\n
    Run Code Online (Sandbox Code Playgroud)
  4. \n
  5. 在您的语言切换器功能中,删除当前的日期选择器并使用新语言初始化新的日期选择器,确保也以新的格式更新日期:

    \n\n
    $scope.switchLanguage = function (key) {\n  var dp = $(\'#datePicker\');\n  // get current date\n  var currentDate = dp.datepicker(\'getDate\');\n\n  // update datepicker with new locale\n  dp.datepicker(\'remove\');\n  dp.datepicker({\n    autoclose: true,\n    language: convertorMap[key]\n  });\n  // restore current date according to the new locale\n  dp.datepicker(\'update\', currentDate);\n\n  $translate.use(key);\n};\n
    Run Code Online (Sandbox Code Playgroud)
  6. \n
  7. 要仅在翻译准备就绪时显示视图,请将包装器元素(我使用的<body>)更改为如下所示:

    \n\n
    <body ng-controller="Ctrl" class="ng-hide" ng-show="showView">\n  .....\n</body>\n
    Run Code Online (Sandbox Code Playgroud)\n\n

    在你的控制器中:

    \n\n
    // will be fired when the service is "ready" to translate (i.e. loading 1st language)\n$translate.onReady(function () {\n  $scope.showView = true;\n});\n
    Run Code Online (Sandbox Code Playgroud)
  8. \n
  9. jQuery datepicker 上的ng-model指令不执行任何操作,因此我将其删除,并将ng-model更新代码添加到初始 datepicker 函数中:

    \n\n
    $(\'#datePicker\').datepicker({\n  autoclose: true\n})\n// update ng model\n.on(\'changeDate\', function(e) {\n  $timeout(function () {\n    $scope.date = $(\'#datePicker\').datepicker(\'getUTCDate\');\n  });\n});\n
    Run Code Online (Sandbox Code Playgroud)
  10. \n
\n\n

如果您在控制台中看到如下消息:

\n\n
\n

pascalprecht.translate.$translateSanitization:尚未配置清理策略。这可能会产生严重的安全隐患。

\n
\n\n

据说将在下一个版本中修复:https://github.com/taigaio/taiga-front/issues/778

\n\n

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

\n