如何使用角度翻译动态翻译输入文本（日期选择器）值？答案

【问题标题】：How to translate the input text (datepicker) value dynamically using angular-translate?如何使用角度翻译动态翻译输入文本（日期选择器）值？
【发布时间】：2017-02-20 04:33:43
【问题描述】：

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

日期被选入输入元素：

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

占位符翻译效果很好，但是当我更改语言时，日期格式没有发生任何变化。我创建了一个描述当前场景的 plunkr。

Plunker Link

请提出一种翻译插入值或表格文本的方法。另外，我想知道如何在页面加载之前克服键值的闪烁。

【问题讨论】：

你见过this吗？
是的，我已经看到了，但这使用了 moment js，我将不得不为我正在使用的日期加载所有语言环境，我不赞成使用
这是指令jsfiddle.net/7y3y9nq7 中的类似实现@ Angular translate 有一些事件；您可以使用它来更改模型值angular-translate.github.io/docs/#/guide/18_events
你在使用 ui-bootstrap 日期选择器吗？
@Angular_10 我正在使用bootstrap-datepicker.readthedocs.io/en/latest/index.html

标签： angularjs datepicker angular-translate

【解决方案1】：

添加意大利语语言环境，我从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"
};

添加语言代码从en_EN格式到en的转换映射：

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

在您的语言切换器功能中，删除当前的日期选择器并使用新语言初始化一个新的，确保也以新格式更新日期：

$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);
};

要仅在翻译准备好时显示视图，请将您的包装元素（我使用 <body>）更改为如下所示：

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

在你的控制器中：

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

jQuery datepicker 上的

ng-model 指令什么都不做，所以我删除了它，并将 ng-model 更新代码添加到初始 datepicker 函数：

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

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

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

据说下个版本会修复：https://github.com/taigaio/taiga-front/issues/778

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

【讨论】：

感谢精美而详细的解决方案对于使用 translatePartialLoader 的任何人，请务必参考stackoverflow.com/questions/32123924/… 以解决与未翻译文本闪烁相关的问题
另外请参考stackoverflow.com/questions/37247083/…解决FOUC问题。