如何使用angular-translate動態翻譯輸入文本（datepicker）的值？

我正在使用angular-translate爲我的應用程序提供i18n，我能夠正確翻譯標籤，按鈕文本等。我正面臨的問題是當我試圖根據所選語言區域設置更改日期時。日期是從日期選擇器中選擇的。如何使用angular-translate動態翻譯輸入文本（datepicker）的值？

日期被選定爲輸入元素：

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

佔位翻譯作品完美，但是當我改變語言沒有變化發生的日期格式。我已經創建了一個描述當前場景的plunkr。

Plunker Link

請提出一個方法中，我可以在翻譯形式插入數值或文字。另外，我想知道如何在頁面加載之前克服鍵值的閃爍。

來源

2016-10-11 Rishabh

你見過[這]（http://stackoverflow.com/questions/29742365/how-to-翻譯-使用角向一個最新-對象-翻譯）？ – Corporalis

是的，我已經看到了這一點，但這使用時刻js，我將不得不加載所有的區域設置只是爲了我使用的日期，我不贊成使用 – Rishabh

這是一個類似的實現在一個指令http：// jsfiddle.net/7y3y9nq7/ Angular translate有一些事件;你可以使用它，爲改變模型的價值https://angular-translate.github.io/docs/#/guide/18_events –

添加意大利語言環境，我複製它從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' 
};

在你的語言切換器函數，刪除當前的datepicker並用新的語言初始化一個新的，確保更新dat E在新的格式，以及：

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

NG-模型指令jQuery的日期選擇什麼都不做，所以我刪除它，ADDE d NG-模型更新代碼初始日期選擇器功能：

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

如果你喜歡的控制檯消息看：