CODEWITHSUNDEEP
datetimetwitter-bootstrapangularjsangularjs-directiveangularjs-scope
daydreamer
daydreamer

Reputation: 91959

Using bootstrap-datetime picker with AngularJS

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

Upvotes: 7

Views: 22993

Answers (3)

mattarau
mattarau

Reputation: 2512

I know that this is kind of old, but as long as you have answered yourself with a workaround solution and asked to let you know about an angular way, here is what I think that you were looking for:

Angular Datetime Picker

It is styled with Twitter Bootstrap, but I think that this won't be a problem.

Upvotes: 1

Langdon
Langdon

Reputation: 20063

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.

Upvotes: 3

daydreamer
daydreamer

Reputation: 91959

Since, My project also depends upon 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 do not know any better technique at the moment so unblocked myself, if someone knows an angular way, please let me know

Upvotes: 1

Related Questions