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.

my question sir is the error message in birthdate field is not removing when I select a date. — Royce
– Royce, Commented Jul 1, 2016 at 3:24
Please take a look on my answer. I included an snippet code for ui bootstrap — Alvaro Silvino
– Alvaro Silvino, Commented Jul 1, 2016 at 11:24

Alvaro Silvino · Accepted Answer · 2016-07-01 11:23:54Z

2

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.

edited Jul 1, 2016 at 11:23

answered Jul 1, 2016 at 3:30

Alvaro Silvino

9,83314 gold badges56 silver badges81 bronze badges

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

1 Comment

Royce Over a year ago

Thank you now I understand. :)

Trung Le Nguyen Nhat · Accepted Answer · 2016-07-01 04:38:26Z

0

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!

answered Jul 1, 2016 at 4:38

Trung Le Nguyen Nhat

6466 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular JS and JQuery datepicker

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related