Как поймать событие изменения даты загрузки бутстрапа?

Question

Теперь я пытаюсь сделать что-то после того, как пользователь изменил дату. но похоже, что мое ng-изменение игнорируется. Вот мой пример кода:

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

Любая идея?

Answer 1

Вы можете следить, когда $scope изменилось.

Что-то вроде этого:

$scope.startdate; 

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

Answer 2

То, как я это делал раньше, состоит в том, чтобы обернуть материал jQuery datepicker в угловую директиву. Это грубо, но вот идея:

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

Вы можете захватить событие изменения из элемента Jquery и использовать его для вызова функции в контроллере, или просто использовать его, чтобы установить значение объема или любой другие:

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

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

Тогда вам просто нужно добавить директиву в свой йоте элемент:

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

Затем указать, какую область видимости функции для вызова:

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

Как я уже сказал, это грубо, просто напомнил об этом быстро. Если это не поможет, я выкопаю образец, который тестируется.

Надеюсь, что это поможет!

также есть DatePicker директива здесь может быть halpful:

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

Answer 3

Простое решение: Попробуйте передавая значение

HTML

ng-change="selectDate(dt)"

JS

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

Надеюсь, это решит вашу проблему!