Angular JS bootstrap UI日曆問題

我正面臨着angular-ui引導日曆的非常奇怪的問題。Angular JS bootstrap UI日曆問題

這裏是我創建

http://plnkr.co/edit/V5UgCbfilCXX8nsube12?p=preview

樣品

的情況是，當頁面土地它顯示在NG-模型變量正確的日期然而，當我從日曆NG-模型中選擇日期顯示日期UST。

例如當我從日曆中選擇日期爲「01/05/2012」ng-model綁定屬性顯示爲「2012-01-04T18：30：00.000Z」時。我想要什麼在文本框，即「2012年5月」。

如何解決這個問題。

<!doctype html> 
<html ng-app="ui.bootstrap.demo"> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> 
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<script> 
    angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
    angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) { 
     $scope.today = function() { 
     $scope.dt = new Date(); 
     }; 

     $scope.dates = [{ date:'01/01/2012',isOpen:false, isDisabled:false}, {date:'05/05/2000',isOpen:false, isDisabled:false}, {date:'',isOpen:false, isDisabled:true}]; 

     $scope.today(); 

     $scope.clear = function() { 
     $scope.dt = null; 
     }; 

     // Disable weekend selection 
     $scope.disabled = function(date, mode) { 
     return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6)); 
     }; 

     $scope.toggleMin = function() { 
     $scope.minDate = $scope.minDate ? null : new Date(); 
     }; 
     $scope.toggleMin(); 

     $scope.open = function($event, date) { 
     $event.preventDefault(); 
     $event.stopPropagation(); 
     date.isOpen=true; 
     $scope.opened = true; 
     }; 

     $scope.dateOptions = { 
     formatYear: 'MM/dd/yyyy', 
     startingDay: 1 
     }; 

     $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
     $scope.format = 'MM/dd/yyyy'; 
    }); 
</script> 
</head> 
<body> 

<div ng-controller="DatepickerDemoCtrl"> 
    <h4>Popup</h4> 
    <br/> 
<br/> 
My Dates object {{dates}} 
<br/> 
<br/> 
<div class="row" ng-repeat='x in dates'> 
<span style="margin-left:20px">{{x.date}}</span> 
    <div class="col-md-6"> 
     <p class="input-group"> 
      <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="x.date" is-open="x.isOpen" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> 
      <span class="input-group-btn"> 
      <button type="button" ng-disabled="x.isDisabled" class="btn btn-default" ng-click="open($event,x)"><i class="glyphicon glyphicon-calendar"></i></button> 
      </span> 
     </p> 
    </div> 
    <br/> 
<br/> 
</div> 
<hr /> 
</div> 
    </body> 
</html>

來源

2015-04-02 user3249448