title: Use Jquery Datepicker in AngularJS
body: <p>I am working with AngularJS. I am using jquery datepicker to enter dates.</p>
  
  <p>If I manually enter date then it works but when I use datepicker it always shows ng-invalid.</p>
  
  <p>jQuery:-</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
              $(document).ready(function () {
                  $('.modal-content').valida();
                  var logic = function (currentDateTime) {
                  };
                  $('.myCalendar').datepicker({
                      //showOn: "both",
                      changeYear: true,
                      changeMonth: true,
                      dateFormat: 'mm/dd/yy',
                      //maxDate: new Date(),
                      yearRange: '1960:2099'
                  });
             });
  </code></pre>
  
  <p>View:-</p>
  
  <pre><code>  &lt;input type="text" class="form-control myCalendar" ng-model="employeeDOB" data-modal="modal" ng-required="true" datepicker /&gt;
  </code></pre>
  
  <p>Model:-</p>
  
  <pre><code>   public DateTime DOB { get; set; }
  </code></pre>
  
  <p>Angular Module:-</p>
  
  <pre><code>  var app = angular.module("myApp", ['angularUtils.directives.dirPagination']);
  </code></pre>
  
  <p>I also tried with change in module by adding but did not work for me. </p>
  
  <pre><code>app.directive('datepicker', function () {
      return {
          require: 'ngModel',
          link: function (scope, element, attrs, ngModelCtrl) {
              $(function () {
                  element.datepicker({
                      //showOn: "both",
                      changeYear: true,
                      changeMonth: true,
                      dateFormat: 'mm/dd/yy',
                      //maxDate: new Date(),
                      yearRange: '1960:2099',
                      onSelect: function (dateText, inst) {
                          ngModelCtrl.$setViewValue(dateText);
                          scope.$apply();
                      }
                  });
              });
          }
      }
  });
  </code></pre>