1

私はいくつかの日付をconatiansしているテーブルを持っており、それらを編集するためにdatepickerを得るためにangle UIブートストラップを使用しようとしています。日付がアングルブートストラップのdatepickerに表示されない

datepickerが正常に表示され、問題のない日付を選択できるようになりましたが、ポップアップから新しい日付を選択するまで、日付自体は入力に表示されません。

は、このコードを再作成することができます:

<!doctype html> 
<html ng-app="ui.bootstrap.demo"> 

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
</head> 

<body> 

    <style> 
    .full button span { 
     background-color: limegreen; 
     border-radius: 32px; 
     color: black; 
    } 

    .partially button span { 
     background-color: orange; 
     border-radius: 32px; 
     color: black; 
    } 
    </style> 
    <div ng-controller="DatepickerPopupDemoCtrl"> 
    <table> 
     <tbody> 
     <tr ng-repeat="event in eventFixtures track by $index"> 
      <td> 
      <div class="row"> 
       <div class="col-md-6"> 
       <p class="input-group"> 
        <input type="text" class="form-control" ng-model="event.date" uib-datepicker-popup="dd/M/yyyy" is-open="event.isOpen" ng-click="event.isOpen = true;" /> 
       </p> 
       </div> 
      </div> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</body> 

</html> 

と、この:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) { 
    $scope.eventFixtures = [ 
    {name: "1", date: "1-1-01"}, 
    {name: "2", date: "2-2-02"}, 
    {name: "3", date: "3-3-03"}, 
    {name: "4", date: "4-4-04"}, 
    {name: "5", date: "5-5-05"} 
    ]; 

}); 

答えて

2

は問題が日付データソースが文字列でないDateオブジェクトでいた、それを考え出しました。新しいデータオブジェクトを選択すると、それは変数に書き込まれますが、それまでは文字列であり、そうでない場合もあります。

あなたはeventFixtures宣言の後にこれを書いている場合、それは日付を変換して、問題を説明します:

for(var i = 0; i < $scope.eventFixtures.length; i++) { 
     $scope.eventFixtures[i].date = new Date($scope.eventFixtures[i].date); 
    } 
+1

あなたはそれを考え出しましたうれしいです!良いキャッチ – mhodges

関連する問題