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

时间:2016-10-11 15:09:04

标签: angularjs datepicker 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} }}"/>

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

Plunker Link

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

1 个答案:

答案 0 :(得分:2)

  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"
    };
    
  2. 将语言代码的转化地图从en_EN格式添加到en

    // language codes convertor map
    var convertorMap = {
      'en_US': 'en',
      'it_IT': 'it'
    };
    
  3. 在您的语言切换器功能中,删除当前的datepicker并使用新语言初始化新的,同时确保以新格式更新日期:

    $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);
    };
    
  4. 要仅在翻译准备就绪时显示视图,请更改您的包装元素(我使用<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;
    });
    
  5. 关于jQuery datepicker的
  6. ng-model 指令什么都不做,所以我删除了它,并将 ng-model 更新代码添加到初始datepicker函数:

    $('#datePicker').datepicker({
      autoclose: true
    })
    // update ng model
    .on('changeDate', function(e) {
      $timeout(function () {
        $scope.date = $('#datePicker').datepicker('getUTCDate');
      });
    });
    
  7. 如果您在控制台消息中看到如下消息:

      

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

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

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