Home > Software design >  Angularjs onchange datetime picker not working
Angularjs onchange datetime picker not working

Time:11-24

First I want to say that I've read many fixes, but noone have fixed my problem.

I'm using this library, https://github.com/amittkSharma/extended-datetimepicker, I need to call a function after my input gets updated.

Examples of how to use the clock can be found in this link, https://rawgit.com/amittkSharma/extended-datetimepicker/master/index.html, this is basically how I'm using the clocks, attaching them to an ng-model.

This library uses a directive, and opens a clock to pick time or date, I'm using it for the time part, I liked this clock very much, so I'm using it. But I cannot find a way to catch the onchange event for my input.

In the directive code there is this comment in line 134, //@TODO custom event to trigger input, which I thought I might add something there, I tried to add an element.on('change') function, but I didn't get it to work, so I'm out of ideas.

I'm using this library to load a bunch a times and make picking time easier. So I need a solution that works like inside on a ng-repeat, or something I can iterate.

Any help would be very much appreciatted.

EDIT

After the answer given by samura, I did some more investigation as to why it wasn't working on my $scope variable.

I didn't mention this, but my $scope variable is an array, and this was the problem (this is why you need to be as detailed as possible when your are asking a question). You need to add a 3rd parameter to watch for changes inside the array, you need to add true.

Like this:

$scope.$watch('timesArray', function() {
    alert('hey, time has changed!');
}, true); //here the 3rd param

Taken from: How to deep watch an array in angularjs?

CodePudding user response:

For this input

<input mdc-datetime-picker date="false" time="true" type="text" id="time" short-time="true"
           placeholder="Time"
           min-date="minDate"
           format="hh:mm a"
           ng-model="time">

You can use

$scope.$watch('time', function() {
    alert('hey, time has changed!');
});

inside your controller to catch any change on the time property.

  • Related