Angular Directive Datepicker

Some thicky hack to use JQuery Datepicker

by santhosh lanka

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div ng-controller="appctrl">

  <div ng-repeat="d in data">
    {{ startDate }} {{startDate1}}
  <input type="text" datepicker ng-model="startDate[$index]" />
    <input type="text" datepicker ng-model="startDate1[$index]" />
  </div>
  
<button ng-click="logProperty()">log populated object</button>


</div>

JavaScript

app = angular.module('app', [])

angular.element(document).ready(function(){
	angular.bootstrap(document, ["app"]);
})

app.controller('appctrl', function ($scope) {
$scope.data = ['a', 'b', 'c', 'd'];
$scope.startDate = {};
$scope.logProperty = function() {
    console.log($scope.startDate);
  }
})

app.directive('datepicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      $(el).datepicker({
        onSelect: function(dateText) {
          scope.$apply(function() {
            ngModel.$setViewValue(dateText);
          });
        }
      });
    }
  };
});