jQuery UI Datepicker with AngularJS

index.html

<div id="wrapper" ng-app="myApp">
  <p>{{datePicker || "00/00/0000"}}</p>
  <input type="text" ng-model="datePicker" datepicker />
</div>

jquery-ui-datepicker-with-angularjs.markdown

jQuery UI Datepicker with AngularJS

A Pen by tutorialab.com on CodePen.

License.

script.js

var myApp = angular.module('myApp', []);

myApp.directive("datepicker", function () {
  return {
    restrict: "A",
    require: "ngModel",
    link: function (scope, elem, attrs, ngModelCtrl) {
      var updateModel = function (dateText) {
        scope.$apply(function () {
          ngModelCtrl.$setViewValue(dateText);
        });
      };
      var options = {
        dateFormat: "dd/mm/yy",
        onSelect: function (dateText) {
          updateModel(dateText);
        }
      };
      elem.datepicker(options);
    }
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

style.css

body {
  background: #3568AD;
}
#wrapper {
  font: 20px Calibri;
  width: 100px;
  margin: 0 auto;
}

styles

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />

UI Date picker