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



https fengyuanchen github io datepicker (8)

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 ist nicht erforderlich, dass $ timeout dieses Problem behebt. Ich meine warum, wenn jemand es nicht braucht. Ich habe dieses Problem behoben, indem ich mein Attribut is-open = "date_opened" in is-open = "datePicker.date_opened" geändert habe. Immer eine bewährte Methode, um den Schlüssel für Ihr Objekt zu initialisieren.

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.


Answer #1

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

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


Answer #2

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

Du kannst 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;
 };

Answer #3

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

Answer #4

Ich habe dieses Problem durch Hinzufügen von "is-open" von "open" zu "$ parent.opened" gelöst.

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>


Answer #5

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 Bereichsproblem und dann habe ich gelernt, dass es immer gut ist, "einen Punkt im Variablennamen" zu haben ... (datePicker.opened)

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


Answer #6

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 schließlich die Methode des Zustandswechslers

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

das ist es.


Answer #7

Schnelle Lösung: Das Schaltflächen-Tag wurde vollständig entfernt und der Datumsauswahl-Code wurde geändert, 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" />




angular-ui-bootstrap