Wie fängt das Bootstrap Datepicker Change Event ab?

Question

Jetzt versuche ich etwas zu tun, nachdem Benutzer das Datum geändert haben. aber scheint wie meine ng-änderung ignoriert wird. Hier ist mein Codebeispiel:

<input ng-change='changedate()' 
         type="text" 
         starting-day="2" 
         show-button-bar="false" 
         show-weeks="false" 
         class="form-control addTicketDateInput" 
         datepicker-popup="dd MMM" 
         ng-model="startdate" 
         is-open="openstart"       
         datepicker-options="dateOptions"   
         ng-required="true" 
         close-text="Close" /> 
in my controller: 
$scope.changedate=function(){ 
    console.log($scope.startdate); 
} 

Eine Idee?

Answer 1

Sie könnten im Auge behalten, wenn die $scope geändert.

Etwas wie folgt aus:

$scope.startdate; 

$scope.$watch("startdate", function(newValue, oldValue) { 
    console.log("I've changed : ", startdate); 
}); 

Answer 2

Der Weg, den ich vorher getan habe, ist, den datepicker jQuery-Stoff in eine eckige Direktive zu wickeln. Dies ist rau, aber hier ist die Idee:

app.directive('dateDirective', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      onChange: '&' 
     }, 
     link: function(scope, element, attrs) { 
      element.datetimepicker({ 
      format: "MM-yyyy" 
      //all your options here 
      }).on('changeDate', function(e) { 
      scope.$apply(function(scope) { 
       scope.onChange(e.date); 
      }); 
      }); 
     } 
    }; 
}); 

Sie können das Änderungsereignis aus dem jQuery Elemente erfassen und verwenden sie eine Funktion in Ihrem Controller zu nennen, oder es nur Umfang Werte verwenden oder was auch immer:

var app = angular.module('myApp', []); 

app.controller('myAppCtrl', function($scope) { 
    $scope.current = ''; 
    $scope.changedate = function(date){ 
    $scope.current = date; 
    }; 
}); 

Dann brauchen Sie nur die Richtlinie zu Ihrem dom Element hinzuzufügen:

<input date-directive 
        type="text" 
        starting-day="2" 
        show-button-bar="false" 
        show-weeks="false" 
        class="form-control addTicketDateInput" 
        datepicker-popup="dd MMM" 
        ng-model="startdate" 
        is-open="openstart"       
        datepicker-options="dateOptions"   
        ng-required="true" 
        close-text="Close" /> 

es dann sagen, welche Scope-Funktion aufzurufen:

<input date-directive onChange='changedate(date)' 
        type="text" 
        starting-day="2" 
        show-button-bar="false" 
        show-weeks="false" 
        class="form-control addTicketDateInput" 
        datepicker-popup="dd MMM" 
        ng-model="startdate" 
        is-open="openstart"       
        datepicker-options="dateOptions"   
        ng-required="true" 
        close-text="Close" /> 

Wie ich schon sagte, das ist rauh, erinnerte mich daran schnell. Wenn das nicht hilft, werde ich eine Probe ausgraben, die getestet wird.

Hoffe, dass hilft!

auch, gibt es eine Datumsauswahl-Richtlinie hier die halpful sein könnte:

https://angular-ui.github.io/bootstrap/

Answer 3

Einfache Lösung: Versuchen Wert vorbei

html

ng-change="selectDate(dt)"

js

$scope.selectDate = function(dt) { console.log(dt); }

Ich hoffe, das löst Ihr Problem!