Come catturare l'evento di modifica datestrap di bootstrap?

Question

Ora sto provando a fare qualcosa dopo che l'utente ha cambiato la data. ma sembra che il mio ng-change sia ignorato. Ecco il mio esempio di codice:

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

Qualche idea?

Answer 1

Si potrebbe tenere d'occhio quando il $scope cambiato.

qualcosa di simile:

$scope.startdate; 

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

Answer 2

Il modo in cui l'ho fatto prima è di racchiudere il materiale jQuery di datepicker in una direttiva angolare. Questo è ruvida ma ecco l'idea:

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

È possibile catturare l'evento change dall'elemento jQuery e utilizzarlo per chiamare una funzione nel controllore, o semplicemente utilizzarlo per impostare valori di portata o qualsiasi altra cosa:

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

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

Poi basta aggiungere la direttiva per il vostro elemento DOM:

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

poi gli si dice che la funzione portata a chiamare:

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

Come ho detto questo è ruvido appena richiamato rapidamente. Se questo non aiuta, estraggo un campione che è stato testato.

Spero che questo aiuti!

Inoltre, c'è una direttiva datepicker qui che potrebbe essere halpful:

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

Answer 3

Soluzione semplice: Prova valore passando

html

ng-change="selectDate(dt)"

js

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

Spero che questo risolva il problema!