Angular JS and JQuery datepicker

Question

My birthdate field was created by JQuery using datepicker function then the required field validation is handled by AngularJS using ng-show whenver I submit the form there is a error handling but when I choose date in the field the error message is not remove.

<input type="text name="birthdate" id="datepicker" ng-model="birthdate" readonly required >
  <span id="errordate" ng-show="submitted && form.birthdate.$error.required">*required</span><br>

<script>
          $function(){
           $('#datepicker').datepicker();
         });
</script>

Here is the form look at the birthdate field Please Help me thank you.

Answer 1

JQuery and angular are paradigmatically differents.

If you want a jQuery like query selector. Please use the built in jQuery from angular.

For date picker you should use Ui-bootstrap. It's 100% angular compatible. You won't see those errors.

Take a look in this snippet with ui-bootstrap here.

In case you need to use jQuery . Every moment you chance any attribute that angular are "watching" you have to update the angular's digest with:

$scope.$apply()

Where all $scope attributes will update the values.

However, I strongly suggest you to don't use $apply() never. I suggest you to not use jQuery as well.

Answer 2

When jQuery DatePicker apply change to <input> , AngularJS does not know this change, you must call $scope.$apply() to make AngularJS check and apply new changes. But I think you should use $timeout to apply this change and avoid AngularJS inprog error, more information here .

Here is my ONLINE DEMO . Hope this help!