timepicker doens't push to angular array

[okkernoot]

I have an application where I added the angular-jquery-timepicker plugin using the following instruction: http://recras.github.io/angular-jquery-timepicker/

The dropdown is working, however when I click on a time in the dropdown, the time isn't pushing tot the ng-model 'date'. When I click within the 'input text box' I can add extra value to the text boxes. Than he value is right. What am I doing wrong?

app.js - file
var app = angular.module("bezoekersApp", ["xeditable", "ui.timepicker"]);

additional file.js - file

$(".timepicker").timepicker({
        timeFormat: 'HH:mm',
        interval: 30,
        minTime: '7',
        maxTime: '19:00',
        startTime: '07:00',
        dynamic: false,
        dropdown: true,
        scrollbar: true,
    });

html:

<input ng-model="date" ui-timepicker />
<span ng-model="date" ui-timepicker>{{ date | date:'shortTime' }}</span>

[timmipetit]

Hi,

You probably don't need the extra js file that initializes the timepicker, but I'm not sure if that causes your problem. Could you create a jsfiddle/plunker that shows your problem if it persists?

[falexandrou]

Hi @timmipetit ,
I've had a similar problem today. After some debugging, I found out that this returns a jQuery element which later makes the validator return false, so the value is undefined. Could that be the cause?

[timmipetit]

Thanks for the debugging @falexandrou. The getTime call should return a Date object, not a jQuery element. Could you give an example (jsfiddle/plunker) that demonstrates this?

[falexandrou]

I've tested just the jquery-timepicker and it returns a Date indeed. Now I need to figure out why I get a jQuery element :) I'll get back to you with more details (hopefully)

[falexandrou]

@timmipetit in my case I've verified that it was a case of applying a custom css class where it removed the ui-timepicker-input class somehow. So when getTime was called, it searched for that class and I got a new element as expected because of this.