AngularJS Bootstrap-Datepicker-Popup zeigt falsches Datum beim ersten Klick an

Ich initialisiere ein Modell mit einer Date-Funktion und binde es an einen Eingang, der einen Datepicker hat.AngularJS Bootstrap-Datepicker-Popup zeigt falsches Datum beim ersten Klick an

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

Auf den ersten Klick zeigt die Datumsauswahl das aktuelle Datum obwohl das tatsächliche Datum unterscheidet. Wenn Sie dann erneut auf die Eingabe klicken, wird das Datepicker-Popup auf das korrekte Datum zurückgesetzt.

Ich habe versucht:

Formatierung Datum $filter
Benutzerdefinierte new Date() Funktion
Entfernen min-date Attribut

Wie kann ich das Popup-Fenster mit dem Datum an das Modell gebunden zu zeigen?

Ich verwende:

AngularJS v1.5.0
Bootstrap v3.3.6
Angular-ui-Bootstrap-Version: 0.13.4

Klicken Sie zuerst ---- - >>>>>

Zweiter Klick ----- >>>>

Quelle

2016-08-01 Mahesh

Ich habe die Situation überprüft und scheint, dass die Versionen, die Sie verwenden, irgendwie widersprüchlich sind. Wenn ich angular 1.4.9 oder niedriger benutze und deinen Code versuche, scheint alles zu funktionieren. Hier ist ein plunker, um Ihnen das zu zeigen. Aber sobald ich angular 1.5.0 oder höher benutze, stehe ich vor dem gleichen Problem wie du. Sie könnten angular 1.4.9 und angular-ui-bootstrap 0.13.4 verwenden oder Ihre eckige ui Bootstrap-Version aktualisieren.

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(); 
});

Quelle

2016-08-02 11:11:27 Amit

Vielen Dank dafür. Ich kann Angular unter 1,5 nicht ändern, da andere Bibliotheken von dieser Version abhängig sind. Ich habe versucht, UI-Bootstrap von 0.13.4 auf 1.0.0 oder sogar 2.0.1 zu ändern. Aber das Popup tauchte nie auf. https://plnkr.co/edit/15euZAV2vERLC6KS6Hgf. Aber ich fand einen anderen Weg, um es zu beheben. Ich habe die Antwort hinzugefügt. Vielen Dank. – Mahesh

Wie @Amit erwähnt, scheint das Problem wegen der Inkompatibilität zwischen den Versionen der Bibliotheken zu sein.

Basierend auf dem genannten Fehler here funktionierte die Lösung, um attribute init-date hinzuzufügen.

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

Hier ist ein plunker

Quelle

2016-08-02 15:02:59 Mahesh

AngularJS Bootstrap-Datepicker-Popup zeigt falsches Datum beim ersten Klick an

Antwort

Verwandte Themen