分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – 如何使用angular-translate动态翻译输入文本(datepicker)值？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在使用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

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

解决方法

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

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

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

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