wake-up-neo.com

Datepicker lässt sich in der Version 0.11.0 nicht mehrmals öffnen

Ich versuche 2 Datepicker zu haben und verwende die Angular UI Version 0.11.0.

Mein HTML-Code

<span ng-if="periods.period == 10">
     <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="opened1"  max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />
     <button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button>

</span>


<span ng-if="periods.period == 10"> 
- 
    <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customEndDate" is-open="opened2"  min-date="cdate.customStartDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)"  ng-required="true" close-text="Close" class="input-md" />
    <button class="btn" ng-click="open($event,'opened2')"><span class="glyphicon glyphicon-calendar"></span></button>   
</span>

und mein JS-Code lautet `

                     $scope.disabled = function(date, mode) {
                      return ( mode === 'day' && ( date.getDay() === -1 || date.getDay() === 7 ) );
                     };

                     $scope.maxDate = new Date();


                       $scope.open = function($event,opened) {
                            $event.preventDefault();
                            $event.stopPropagation();

                            $scope[opened] = true;
                          };


                     $scope.dateOptions = {
                     'year-format': "'yy'",
                     'starting-day': 1
                     };

` Wenn ich auf die Schaltfläche klicke, öffnet sich datepicker zunächst ganz gut. Sobald es jedoch einmal geöffnet wurde, besteht das Problem darin, dass das Datepicker-Popup beim nächsten Klicken auf die Schaltfläche nicht geöffnet wird.

39
Aniket Sinha

Schnelle Lösung: Entfernte das Schaltflächen-Tag vollständig und änderte den Datumsauswahl-Code, sodass es wie folgt aussieht:

<input type="text" 
       datepicker-popup="dd-MMMM-yyyy"
       ng-model="cdate.customStartDate"
       is-open="cdate.customStartDate.open"
       ng-click = "cdate.customStartDate.open = true"
       max-date="maxDate"
       datepicker-options="dateOptions"
       date-disabled="disabled(date, mode)" 
       ng-required="true"
       close-text="Close"
       class="input-md" />
41
Aniket Sinha

Ich hatte das gleiche Problem, wodurch ich die Datumsauswahlsteuerung nur einmal mit der Schaltfläche öffnen konnte, aber es wurde kein zweites Mal geöffnet. Das Problem kann mit einem Bereichsproblem zusammenhängen, das möglicherweise auftritt, weil die Schaltfläche kein untergeordnetes Element des Eingabe-HTML-Elements ist. Ich konnte den Button zum Laufen bringen, indem ich das Datenmodell etwas änderte. Anstelle von $scope.isDatePickerOpen als Modell habe ich beispielsweise $scope.datePicker.isOpen (und is-open="datePicker.isOpen") eingestellt. Beachten Sie, dass das neue Datenmodell für is-open nicht direkt von $scope abhängt, sondern um eine Ebene tiefer (aus dem $scope.datePicker-Objekt) verschoben wurde. Dies scheint die Daten "auffindbarer" zu machen. 

Das andere, was ich tun musste, war das Datenmodell mit einem Timer zu ändern. Zum Beispiel:

$scope.openDatePicker = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $timeout( function(){
     $scope.datePicker.isOpen = true;  
  }, 50);
};

Jedenfalls war Ihre oben beschriebene Problemumgehung die Motivation, weiter nach einer Lösung zu suchen, also danke!

55
Exemel

Antwort auf andere StackOverflow-Frage gefunden, einfach is-open = "$ parent.isOpen" verwenden

https://stackoverflow.com/a/20213924/1596661

31
KCWebMonkey

Ich hatte das gleiche Problem, aber durch einfaches Einfügen der "geöffneten" booleschen Variable var in ein Objekt wurde das Problem für mich gelöst:

< .. is-open="datePicker.opened" >
...
$scope.datePicker = {opened:false};
$scope.openDate = function($event) {
     $event.preventDefault();
     $event.stopPropagation();
     $scope.datePicker.opened = true;
};

Ich habe eckig nicht so lange gebraucht, aber ich denke, das ist ein Umfangsproblem und dann habe ich gelernt, dass es immer gut ist, einen Punkt im Variablennamen zu haben ...

(Ich sehe jetzt einen Beitrag mit einer ähnlichen Lösung oben. Aber ich brauchte das Timeout nicht. Dieser Code war genug.)

16
c_sandborg

Ich habe das Problem so gelöst:

In der HTML-Datei:

<input is-open="opened"
       type="text" class="form-control" datepicker-popup="{{format}}" 
       ng-model="md" />

und in der Javascript-Datei habe ich ein Timeout hinzugefügt, um 'zu benachrichtigen', dass es geschlossen ist, um es erneut öffnen zu können: 

$scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
        setTimeout(function() {
            $scope.opened = false;
        }, 10);              
    };
11
Abdellah Alaoui

Ich habe die einfachste, einzeilige Lösung, die keine Containerobjekte, Funktionsaufrufe oder andere Probleme wie zum Beispiel PrevDefault erfordert. Sie müssen dies nicht einmal im Gültigkeitsbereich angeben, da undefined als falsch bewertet wird.

...
  ng-click="dateOpened = !dateOpened"
...

Ich habe dies mit angle-ui 0.13.0 (Angular Bootstrap) getestet. Dies funktioniert, weil der Aufruf von ng-click das Standardereignis bereits überdeckt.

3
FlavorScape

Ich habe dieses Problem gelöst, indem ich "$ parent.opened" So geändert habe.

seanControllers.controller('TracksController', ['$scope',
  function($scope) {
    $scope.openCalendar = function($event) {
      $event.preventDefault();
      $event.stopPropagation();

      $scope.opened = true;
    };
  }
]);
<form>
  <label>Eindtijd</label>
  <div class="input-group">
    <input type="text" class="form-control" datetime-picker="dd-MM-yyyy HH:mm" ng-model="track.eindtijd" is-open="$parent.opened" />
    <span class="input-group-btn">
	<button class="btn btn-default" type="button" ng-click="openCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
  </div>
</form>

2
PieterVK

Isolieren Sie einfach Ihre dataPicker-Statusvariablen. 

$scope.dataPickerStates = {
  open1:false,
  open2:false
}

dann ändern Sie Ihre HTML in 

<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="dataPickerStates.open1"  max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />

und zum Schluss Ihre Zustandsänderungsmethode

$scope.open = function($event, opened) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.datePickerStates[opened] = true;
};

das ist es. 

2
Sándor Tóth

Dasselbe Problem, aber die oben genannten Lösungen funktionierten nicht für mich. Es stellte sich heraus, dass diese Datei nicht enthalten war: ui-bootstrap-tpls-0.14.2.js. 

Stellen Sie sicher, dass Sie alle in der Beispieldokumentation aufgeführten Dateien mit einschließen

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

Viel Glück!

1
Don F

Nach so vielen Antworten. Was für mich funktioniert hat, ist wie folgt:

$scope.datePicker = {
  date_opened:false
}
$scope.open_from = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.datePicker.date_opened = true;
};

HTML-Vorlage:

<div class="input-group">
    <input name="date_obj_from" type="text" class="form-control" uib-
    datepicker-popup="dd-MMMM-yyyy" ng-model="date_obj_from" is-
    open="datePicker.date_opened" datepicker-options="dateOptions" 
    ng-required="true" close-text="Close" />
    <span class="input-group-btn">
       <button type="button" class="btn btn-default" ng-
    click="open_from($event)">
    <i class="glyphicon glyphicon-calendar"></i>
       </button>
    </span>
</div>

Es muss kein $ timeout zur Behebung dieses Problems verwendet werden. Ich meine, warum, wenn jemand es nicht benötigt .. Ich habe dieses Problem behoben, indem ich mein Attribut geändert habe Objekt.

0
Shoaib Ahmad

Hier ist die Erklärung zu diesem Verhalten 

MTV-Treffen mit AngularJS: Best Practices (2012/12/11) 

https://www.youtube.com/watch?feature=player_detailpage&v=ZhfUv0spHCY#t=1870

sie können es so schreiben.

 <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="date_picker1.opened"  max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />

Im Controller:

$scope.date_picker1 ={
    date: new Date(),
    opened: false;
 };
 $scope.open = function($event) {
     .....
     $scope.date_picker1.opened = true;
 };
0
Emitate