我正在使用angular-translate为我的应用程序提供i18n,我能够正确翻译标签,按钮文本等。 我面临的问题是当我尝试根据所选语言区域设置更改日期时。日期是从日期选择器中选择的。
将日期选入输入元素:
<input type="text" class="form-control" required="" ng-model="date" placeholder="{{ 'DATE_PLACEHOLDER' | translate }}" translate="{{ 'select_date'|translate:{date:date} }}"/>
占位符翻译效果很好,但是当我更改语言时,日期格式没有发生变化。 我创建了一个描述当前场景的plunkr。
请建议一种方法,我可以在其中翻译插入的值或表单中的文本。 此外,我想知道如何在页面加载之前克服键值的闪烁。
答案 0 :(得分:2)
添加意大利语区域设置,我是从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并使用新语言初始化新的,同时确保以新格式更新日期:
$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-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