Question

angular ui-bootstrap日期控件怎么显示成中文

Answer 1

2.1) 需要修改angular-locale_zh-cn.js ，对DATETIME_FORMATS增加三个中文键值对：

[javascript] view plain copy
"DATETIME_FORMATS": {
"TODAY":"\u4eca\u5929",
"CLEAR":"\u6e05\u7a7a",
"CLOSE":"\u5173\u95ed",

2.2) 还不行，today,clear，close等按钮还不能国际化,还需修改ui-bootstrap-tpls-0.13.0.js

主要修改的ui-bootstrap-tpls-0.13.0.js文件中指令datepickerPopup，
你可以参照我的github fork的分支作的修改,直接拷贝对应指令:

https://github.com/napoleonjk/bootstrap/blob/master/src/datepicker/datepicker.js
也可以参照后文我提到的具体修改部分，自行修改.

（此修改我已经pull request到官方库，审核已通过，不知最新版本变更没有）

3.对于第2步修改，你觉得麻烦的话，我可以教你一个省事的法子
这基于你对angular 指令定义要有较好的理解， 具体做法是，在datepicker-popup指令定义的地方，
增加属性current-text,clear-text,close-text的定义

例如：current-text="今天"
[html] view plain copy
<div class="col-md-6">
<p class="input-group">
<input type="date" class="form-control" current-text="今天" datepicker-popup ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>

-------------------------------------------------------------------------------------------------------------------------------------

2.2具体修改以下部分：
修改 ui-bootstrap-tpls-0.13.0.js的指令datepickerPopup

指令datepickerPopup的定义依赖增加$locale，并新加以下片段

[javascript] view plain copy
scope['currentText']=$locale.DATETIME_FORMATS.TODAY||scope['currentText'];
scope['clearText']=$locale.DATETIME_FORMATS.CLEAR||scope['clearText'];
scope['closeText']=$locale.DATETIME_FORMATS.CLOSE||scope['closeText'];

指令参照位置：

[javascript] view plain copy
.directive('datepickerPopup', ['$locale','$compile', '$parse', '$document', '$position', 'dateFilter', 'dateParser', 'datepickerPopupConfig',
function ($locale,$compile, $parse, $document, $position, dateFilter, dateParser, datepickerPopupConfig) {
return {
restrict: 'EA',
require: 'ngModel',
scope: {
isOpen: '=?',
currentText: '@',
clearText: '@',
closeText: '@',
dateDisabled: '&',
customClass: '&'
},
link: function(scope, element, attrs, ngModel) {

var dateFormat,
closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? scope.$parent.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection,
appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? scope.$parent.$eval(attrs.datepickerAppendToBody) : datepickerPopupConfig.appendToBody;

scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : datepickerPopupConfig.showButtonBar;

scope.getText = function( key ) {

scope['currentText']=$locale.DATETIME_FORMATS.TODAY||scope['currentText'];
scope['clearText']=$locale.DATETIME_FORMATS.CLEAR||scope['clearText'];
scope['closeText']=$locale.DATETIME_FORMATS.CLOSE||scope['closeText'];
return scope[key + 'Text'] || datepickerPopupConfig[key + 'Text'];
};