Using bootstrap-datetime collector with AngularJS function

Question

My project needs a datetime, so I found a (Meridian Format in) bootstrap-datetimepicker that seems pretty good, but I can't use it

everything i did in my code

<div class="control-group"> <label class="control-label">Date</label> <div class="controls"> <div class="control-group input-append date form_datetime" data-date="2012-12-21T15:25:00Z"> <input size="16" type="text" ng-model="transaction.date" data-date-format="yyyy-mm-dd hh:ii" value=""> <span class="add-on"><em class="icon-remove"></em></span> <span class="add-on"><em class="icon-th"></em></span> </div> </div> </div> 

but when i do console.log ($ scope.transaction) in my controller

  $scope.save = function() { var transaction = new Transaction(); transaction.name = $scope.transaction['name']; transaction.debit = $scope.transaction['debit']; transaction.date = $scope.transaction['date']; transaction.amount = $scope.transaction['amount']; transaction.category = $scope.transaction['category'].uuid; console.log('adding', $scope.transaction); } 

I see

 Resource {name: "Test", debit: "False", date: undefined, amount: "12", category: "7816635c-3da1-4ccc-b8ab-c07bc3b42202"…} 

Date is undefined. How to associate a value selected in the user interface with ng-model?

UPDATE
Although, with jQuery, I see the value

 $('.form_datetime input').val() "08 May 2013 - 08:12 AM" 

thanks

Answer 1

Since my project also depends on jQuery, I did the following to make it work in my controller

 transaction.date = $('.form_datetime input').val() 

On console.log I see

 Resource {name: "OneMore", debit: "True", date: "2013-05-08T12:27:50", amount: "123", category: "79128f9a-74ab-4c63-b60e-4934aa367575"… 

I don’t know any better technique at the moment, so I’ve unlocked myself, if someone knows the angular way, please let me know

Answer 2

Not all jQuery plugins work right out of the box with Angular. Angular does not monitor the input for “external” changes, as it expects the value to change only when (a) the user changes it or (b) it changes the controller. Angular code should certainly be modified to control changes in input value, but performance is likely to suffer as a result.

I reproduced the problem you see here: http://jsfiddle.net/kf4Xt/

If you want to get away from your "hacking" (by pulling the date from .val () manually), you will need to wrap this plugin in a directive and use this directive. Performing this method would be more difficult with Angular, and you will do this "Angular Path".

The directive should be responsible for calling $(element).datetimepicker() and providing the selected value through bidirectional binding.

The AngularStrap project does just that with a lot of Twitter-Bootstrap plugins, so you can check their source to see how it does.

Answer 3

I know this is a long time ago, but until you answered the workaround yourself and asked to inform you about angular, here is what I think you were looking for:

Angular datetime picker

This is the style with Twitter Bootstrap, but I think it will not be a problem.