AngularJS binding datatimepicker selected value to ng-model

Question

I have a newbie AngularJS question - I am using a datetimepicker library and I'm having a hard time getting the date selected to bind to my model... I saw some posts talking about not being able to access the datetimepicker model directly, but in my case I find that if I just manually TYPE IN a text value in my date input box, it binds! If I select a date with the chooser, I get the dreaded 'undefined' :(... help?

HTML markup:

<div class="col-md-2">
  <div name="fromDateTime" class="input-group date" id="datetimepickerFrom">
    <input class="form-control" type="text" name="fromDateTime" ng-model="formEntries.fromDateTime"/>
      <span class="input-group-addon" data-ng-click="pickFromDateTime()"><span class="glyphicon glyphicon-calendar" id="calIconFrom"></span></span> 
  </div>
</div>

<div class="col-md-2">
  <div name="toDateTime" class="input-group date" id="datetimepickerTo">          
    <input class="form-control" type="text" name="toDateTime" ng-model="formEntries.toDateTime"/>
      <span class="input-group-addon" data-ng-click="pickToDateTime()"><span class="glyphicon glyphicon-calendar"></span></span>
 </div>
</div>

Controller:

$scope.pickFromDateTime = function () {
   $("#datetimepickerFrom").datetimepicker();
   $("#datetimepickerFrom").datetimepicker().change(function() {       
       $(this).data("DateTimePicker").hide();
       console.log($(this).data("DateTimePicker").getDate()); 
   });
}


$scope.pickToDateTime = function () {
   $("#datetimepickerTo").datetimepicker();
   $("#datetimepickerTo").datetimepicker().change(function() {
       $(this).data("DateTimePicker").hide();
       console.log($(this).data("DateTimePicker").getDate());   
   });
}

$scope.getData = function() {
    console.log($scope.formEntries.fromDateTime);
    console.log($scope.formEntries.toDateTime);

}

Want to learn AngularJS properly? Do a project or two without including jQuery or other DOM manipulation libraries at all first. — Matti Virkkunen
– Matti Virkkunen, Commented Sep 30, 2014 at 21:48
I started this without jquery, I just don't know how to do a dattimepicker without it... please let me know if you do. — dhalia
– dhalia, Commented Sep 30, 2014 at 21:54

Jonathan Rowny · Accepted Answer · 2014-09-30 21:39:27Z

1

Never ever ever write DOM or jQuery code in your controller. It will never work properly. You must create a directive to do this. The directive will listen to events from whatever library you're using and update your model. Here is an example of a directive that happens to work with the datepicker. This should get you on the right track.

answered Sep 30, 2014 at 21:39

Jonathan Rowny

7,5981 gold badge21 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

AngularJS binding datatimepicker selected value to ng-model

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related