var App = angular.module('App', ["ui.bootstrap"]).config(['$httpProvider', function ($httpProvider) {
}]);
App.controller('Form', function ($scope, $http, $timeout, $filter) {});
App.directive('datepicker', function ($timeout) {
var linker = function (scope, element, attrs, ngModelCtrl) {
scope: {
myval: '='
}
$timeout(function () {
$(element).datepicker({
dateFormat: "DD, d MM, yy",
yearRange: '1900:+0',
defaultDate: new Date(2000, 0, 1),
changeMonth: true,
changeYear: true,
//showAnim: "fold",
onSelect: function (date) {
ngModelCtrl.$setViewValue(date);
scope.$apply();
},
beforeShow: function (element, datepicker) {
if (attrs.minDate) {
angular.element(element).datepicker("option", "minDate", attrs.minDate);
}
if (attrs.maxDate) {
angular.element(element).datepicker("option", "maxDate", attrs.maxDate);
}
}
});
});
};
return {
restrict: 'A',
require: 'ngModel',
transclude: true,
link: linker,
};
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
<div ng-controller="Form">
<input datepicker id="DPID" type="text" min-date="-43800" max-date="-4840" ng-model="Date1" class="form-control" />
</div>