大佬教程收集整理的这篇文章主要介绍了angularjs – 如何使用angular-translate动态翻译输入文本(datepicker)值?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
日期被选入输入元素:
<input type="text" class="form-control" required="" ng-model="date" placeholder="{{ 'DATE_PLACEHOLDER' | translate }}" translate="{{ 'SELEct_date'|translate:{date:datE} }}"/>
占位符转换工作正常,但是当我更改语言时,日期格式没有发生变化.
我创建了一个描述当前场景的plunkr.
$.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" };
// 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
以上是大佬教程为你收集整理的angularjs – 如何使用angular-translate动态翻译输入文本(datepicker)值?全部内容,希望文章能够帮你解决angularjs – 如何使用angular-translate动态翻译输入文本(datepicker)值?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。