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

There is also another datetimepicker directive for angular that can be found at github.com/zhaber/datetimepicker — Vitalii Fedorenko
– Vitalii Fedorenko, Commented Nov 2, 2013 at 23:19

Langdon · Accepted Answer · 2013-05-08 19:30:19Z

3

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.

answered May 8, 2013 at 19:30

Langdon

20.1k18 gold badges90 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

daydreamer Over a year ago

Can you guide me how to do it? I am pretty new, here is my plunker - plnkr.co/edit/wGrvXAFmPGoYSwh9GfxH?p=preview

Langdon Over a year ago

Seems like what you have there works, but if you want to take it a step further with an element directive: plnkr.co/edit/uSjf5AfLUTakxVJEsJqB?p=preview -- You'll need to clean it up a bit (use the isolated scope to pass in values so you're not hard-coding everything in the template)

daydreamer Over a year ago

Thanks, Yesterday, I came up with plnkr.co/edit/wGrvXAFmPGoYSwh9GfxH, but your idea is much neat and clean, one question though, how in your plunker I can change ng-model to ng-model="transaction.date", because its failing for me when I do that plus changing scope.ngModel = input.val(); to scope.transaction.date = input.val();. for my case, it has to be part of $scope.transaction = {} which you can see in mu plunker

daydreamer Over a year ago

I have created a question stackoverflow.com/questions/16530722/… for what i have been trying to achieve this

Langdon Over a year ago

Looks like you got your answer... gotta use Angular's bi-directional binding. :)

|

daydreamer · Accepted Answer · 2013-05-08 19:29:35Z

1

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

answered May 8, 2013 at 19:29

daydreamer

92.9k204 gold badges477 silver badges754 bronze badges

Comments

Matt Arau · Accepted Answer · 2013-09-20 02:50:25Z

1

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.

answered Sep 20, 2013 at 2:50

Matt Arau

2,5221 gold badge18 silver badges21 bronze badges

Collectives™ on Stack Overflow

Using bootstrap-datetime picker with AngularJS

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related