AngularJS Bootstrap-datepickerポップアップで最初のクリックで不正な日付が表示される

Date関数を使用してモデルを初期化し、日付ピッカーを持つ入力にバインドします。最初のクリックでAngularJS Bootstrap-datepickerポップアップで最初のクリックで不正な日付が表示される

<label>Begin Date</label> 
<div class='input-group date'> 
      <input ng-model="Main.BeginDate" class="form-control" onkeydown="return false" datepicker-popup="MM/dd/yyyy" show-weeks="false" is-open="BeginDate" ng-focus="BeginDate=true" ng-click="BeginDate=true" min-date="Main.MinDate" required/> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
</div>

、日付ピッカーは、実際の日付が異なっていても、現在の日付を示しています。次に入力を再度クリックすると、datepicker-popupはの日付がにリセットされます。

私が試した：min-date属性
を削除$filter
カスタムnew Date()機能

を使用して

の書式の日付がどのように私は、ポップアップがモデルにバインドされた日付を表示するのですか？

私が使用しています：

AngularJS v1.5.0デベロッパーを

ブートストラップv3.3.6

角度-UI-ブートストラップバージョン：0.13.4

まずクリック---- - >>>>>

第2クリック----- >>>>

出典

2016-08-01 Mahesh

状況を確認して、使用しているバージョンのように見えているようです。私が角度1.4.9以下を使用し、あなたのコードを試してみると、すべて動作するようです。ここにはplunkerがあります。しかし、角度1.5.0以上を使用すると、私はあなたと同じ問題に直面します。角度1.4.9と角度-ui-bootstrap 0.13.4を使用することも、あなたのアングルブートストラップバージョンをアップグレードすることもできます。

index.htmlを

<!doctype html> 
<html ng-app="app"> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 

<div ng-controller="DateCtrl" style="padding:40px"> 
    <label>Begin Date</label> 
<div class='input-group date'> 
      <input ng-model="dt" class="form-control" onkeydown="return false" datepicker-popup="MM/dd/yyyy" show-weeks="false" is-open="BeginDateOpen" ng-focus="BeginDateOpen=true" ng-click="BeginDateOpen=true" min-date="Main.MinDate" required/> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
</div> 

</div> 
    </body> 
</html>

example.js

angular.module('app', ['ui.bootstrap']); 
angular.module('app').controller('DateCtrl', function ($scope) { 

$scope.today = function(){ 
    $scope.dt = new Date(1998,1,5) 
} 
$scope.today(); 
});

出典

2016-08-02 11:11:27 Amit

おかげです。他のライブラリがそのバージョンに依存しているため、Angularを1.5未満に変更することはできません。私は、UIブートストラップを0.13.4から1.0.0または2.0.1に変更しようとしました。しかしポップアップは決して現れなかった。 https://plnkr.co/edit/15euZAV2vERLC6KS6Hgf。しかし、私はそれを修正する別の方法を見つけました。私は答えを加えました。ありがとう。 – Mahesh

@Amitで述べたように、問題は、ライブラリのバージョン間の非互換性のあるように思われます。

hereのバグに基づいて、atttribute init-dateを追加するソリューションが機能しました。ここで

<input ng-model="dt" class="form-control" 
     onkeydown="return false" datepicker-popup="MM/dd/yyyy" show-weeks="false" 
     is-open="BeginDateOpen" ng-focus="BeginDateOpen=true" ng-click="BeginDateOpen=true" 
     min-date="Main.MinDate" required 
     init-date="dt"/>

はそのためplunker

出典

2016-08-02 15:02:59 Mahesh

AngularJS Bootstrap-datepickerポップアップで最初のクリックで不正な日付が表示される

答えて

関連する問題