Angularjs validation – bootstrap datepicker input is not recognized

Issue

If you read following Angularjs validations, you understand that:
Message will appear if user interacted and did not fill the date manually.
The problem is when date is filled using the datepicker the input is not recognized by Angularjs and still consider $invalid true, so the message remains there which is confusing/problem although date is already filled using datepicker!

<div class="form-group" ng-class="{ 'has-error' : AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine }"> 
     <input type="text"  required data-provide="datepicker"  class="form-control" name="Birthdate" ng-model="Birthdate"  />
     <span ng-show="AddForm.Birthdate.$invalid  && !AddForm.Birthdate.$pristine" class="help-block" >
  Birthdate is required.
     </span>
</div>

Solution

You can either validate it prior to form submit, or else hook a listener on your datepicker to manually set the model property Birthdate value.

It seems bootstrap datepicker is built on top of JQuery datepicker, manually setting the value would be a bad practice you can refer to:
Update Angular model after setting input value with jQuery

a better approach would be to use some built-in angular component such as the ones from:

https://angular-ui.github.io/bootstrap/
http://dalelotts.github.io/angular-bootstrap-datetimepicker/
https://github.com/dalelotts/angular-bootstrap-datetimepicker

Answered By – guilhebl

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.