Using bootstrap-datetime picker with AngularJS

Question

My project needs datetime so I found (Meridian Format in) bootstrap-datetimepicker which seems pretty good, but I am not able to use it

all I did in my code is

  <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"…}

The date is undefined. How can I associate the value selected in UI with ng-model?

UPDATE
Although, with jQuery, I can see the value

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

Thanks

Answer 1

Not all jQuery plugins work right out of the box with Angular. Angular isn't observing the input for "outside" changes, because it expects the value to only change if (a) the user changes it, or (b) it's changed by the controller. Angular code certainly be modified to monitor changes to the value of the input, but performance would likely suffer as a result.

I've replicated the problem you're seeing here: http://jsfiddle.net/kf4Xt/

If you want to get away from your "hack" (pulling the date from .val() manually), you're going to need to wrap this plugin in a directive and use that directive. Doing it this way would be more inline with Angular and you'd be doing it "The Angular Way".

The directive should be responsible for calling $(element).datetimepicker(), and providing the chosen value via a bi-directional binding.

The AngularStrap project is doing exactly this with a lot of the Twitter Bootstrap plugins, so you could check their source how to see how it's being done.