angular ui-bootstrap日期控件如何显示成中文

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",

         "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