1.引入中文国际化文件angular-locale_zh-cn.js
下载地址(https://github.com/angular/angular.js/tree/master/src/ngLocale), 然后大部分控件就可以显示中文了。
2.有些按钮(today,clear,close)还不能显示中文
比较简易的做法是在datepicker-popup指令定义的地方,增加属性current-text,clear-text,close-text的定义
例如:current-text="今天"
- <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>
<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>
3. 除了上述的做法,也可以自己修改源文件。
有些按钮(today,clear,close)还不能显示中文,以下是我对官方文件的修改。
3.1) 需要修改angular-locale_zh-cn.js ,对DATETIME_FORMATS增加三个中文键值对:
"DATETIME_FORMATS": { "TODAY":"\u4eca\u5929", "CLEAR":"\u6e05\u7a7a", "CLOSE":"\u5173\u95ed",
3.2)还不行,today,clear,close等按钮还不能国际化,还需修改ui-bootstrap-tpls-0.13.0.js
主要修改的ui-bootstrap-tpls-0.13.0.js文件中指令datepickerPopup,具体修改以下部分:
修改 ui-bootstrap-tpls-0.13.0.js的指令datepickerPopup
指令datepickerPopup的定义依赖增加$locale,并新加以下片段
- scope['currentText']=$locale.DATETIME_FORMATS.TODAY||scope['currentText'];
- scope['clearText']=$locale.DATETIME_FORMATS.CLEAR||scope['clearText'];
- scope['closeText']=$locale.DATETIME_FORMATS.CLOSE||scope['closeText'];
scope['currentText']=$locale.DATETIME_FORMATS.TODAY||scope['currentText']; scope['clearText']=$locale.DATETIME_FORMATS.CLEAR||scope['clearText']; scope['closeText']=$locale.DATETIME_FORMATS.CLOSE||scope['closeText'];
指令参照位置:
- .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'];
- };
.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']; };
你可以参照我的github fork的分支作的修改,直接拷贝对应指令:
https://github.com/napoleonjk/bootstrap/blob/master/src/datepicker/datepicker.js