Ris*_*abh 6 datepicker angularjs 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} }}"/>
Run Code Online (Sandbox Code Playgroud)
占位符转换工作正常,但是当我更改语言时,日期格式没有发生变化.我创建了一个描述当前场景的plunkr.
请建议一种方法,我可以在其中翻译插入的值或表单中的文本.此外,我想知道如何在加载页面之前克服键值的闪烁.
添加意大利语区域设置,我从http://forum.html.it/forum/showthread/t-2912577.html复制它:
\n\n$.fn.datepicker.dates[\'it\'] = {\n days: ["Domenica", "Luned\xc3\xac", "Marted\xc3\xac", "Mercoled\xc3\xac", "Gioved\xc3\xac", "Venerd\xc3\xac", "Sabato", "Domenica"],\n daysShort: ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab", "Dom"],\n daysMin: ["Do", "Lu", "Ma", "Me", "Gi", "Ve", "Sa", "Do"],\n months: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"],\n monthsShort: ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"],\n today: "Oggi",\n clear: "Cancella",\n weekStart: 1,\n format: "dd/mm/yyyy"\n};\nRun Code Online (Sandbox Code Playgroud)将语言代码的转换映射从en_EN格式添加为en:
// language codes convertor map\nvar convertorMap = {\n \'en_US\': \'en\',\n \'it_IT\': \'it\'\n};\nRun Code Online (Sandbox Code Playgroud)在您的语言切换器功能中,删除当前的日期选择器并使用新语言初始化新的日期选择器,确保也以新的格式更新日期:
\n\n$scope.switchLanguage = function (key) {\n var dp = $(\'#datePicker\');\n // get current date\n var currentDate = dp.datepicker(\'getDate\');\n\n // update datepicker with new locale\n dp.datepicker(\'remove\');\n dp.datepicker({\n autoclose: true,\n language: convertorMap[key]\n });\n // restore current date according to the new locale\n dp.datepicker(\'update\', currentDate);\n\n $translate.use(key);\n};\nRun Code Online (Sandbox Code Playgroud)要仅在翻译准备就绪时显示视图,请将包装器元素(我使用的<body>)更改为如下所示:
<body ng-controller="Ctrl" class="ng-hide" ng-show="showView">\n .....\n</body>\nRun Code Online (Sandbox Code Playgroud)\n\n在你的控制器中:
\n\n// will be fired when the service is "ready" to translate (i.e. loading 1st language)\n$translate.onReady(function () {\n $scope.showView = true;\n});\nRun Code Online (Sandbox Code Playgroud)jQuery datepicker 上的ng-model指令不执行任何操作,因此我将其删除,并将ng-model更新代码添加到初始 datepicker 函数中:
\n\n$(\'#datePicker\').datepicker({\n autoclose: true\n})\n// update ng model\n.on(\'changeDate\', function(e) {\n $timeout(function () {\n $scope.date = $(\'#datePicker\').datepicker(\'getUTCDate\');\n });\n});\nRun Code Online (Sandbox Code Playgroud)如果您在控制台中看到如下消息:
\n\n\n\n\npascalprecht.translate.$translateSanitization:尚未配置清理策略。这可能会产生严重的安全隐患。
\n
据说将在下一个版本中修复:https://github.com/taigaio/taiga-front/issues/778
\n\n笨蛋: http: //plnkr.co/edit/EGtHPG?p= preview
\n| 归档时间: |
|
| 查看次数: |
980 次 |
| 最近记录: |