title: How to use datepicker in AngularJS using custom directive as a class?
body: <p>Below are my HTML and Javascript code which I used.</p>
  
  <p><strong>HTML Code:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script
      src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="date.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-app="app"&gt;
          &lt;input type="text" ng-model="date" class="datepicker"&gt;&lt;/input&gt;
          {{ date }}
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Java Script:</strong></p>
  
  <pre><code>var datePicker = angular.module('app', []);
  
  datePicker.directive('datepicker', function () {
      return {
          restrict: 'C',
          require: 'ngModel',
           link: function (scope, element, attrs, ngModelCtrl) {
              element.datepicker({
                  dateFormat: 'dd, MM, yy',
                  onSelect: function (date) {
                      scope.date = date;
                      scope.$apply();
                  }
              });
          }    
      };
  });
  </code></pre>
  
  <p>Now when I click on the textbox, the datepicker popup is not coming. </p>
  
  <p>Can someone please help me with a solution to make this datepicker work?</p>