How to dynamically set properties for AngularJS jQueryUI datepicker directive - jquery-ui

Question

I have a need to set the min Date for one of my datepicker inputs to 5 days after today's date. I have setup the jQueryUI datepicker directive for AngularJS, and by itself, it works great. When I try to add any properties to the input for an individual datepicker, such as 'min' (Date), it does not appear to honor the property, and shows me all dates.
sorry for not having a jsfiddle or plunker
EDIT: Updated to show solution
index.html
<input id="requestDate" type="text" ng-model="requestDate" ss-datepicker min-date="5"/>
Datepicker.js
app.directive('ssDatepicker', function(){
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl){
$(function(){
element.datepicker({
dateFormat:'dd-M-yy',
showOn: 'both',
buttonImage: "/e/images/calendar-ui.gif",
buttonImageOnly: true,
buttonText:'Choose a Date',
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);
}
},
onSelect:function(date){
scope.$apply(function(){
ngModelCtrl.$setViewValue(date);
});
}
});
});
}
}
});
Thanks in advance!

Answer 1

Okay, thanks to Sebastian, I was able to figure it out. It doesn't, for some reason, like a date variable for the "min-date" attribute, but it will accept the offset, which, for my purposes, works exactly as needed. I am fairly sure that it is a formatting problem with the date that prevented it from working.
app.directive('ssDatepicker', function(){
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl){
$(function(){
element.datepicker({
dateFormat:'dd-M-yy',
showOn: 'both',
buttonImage: "/e/images/calendar-ui.gif",
buttonImageOnly: true,
buttonText:'Choose a Date',
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);
}
},
onSelect:function(date){
scope.$apply(function(){
ngModelCtrl.$setViewValue(date);
});
}
});
});
}
}
});

Answer 2

How do you thing the "min" value should led to some changes?
Your directive doesn't read this value, does it?
You can access it via attrs.min in your link function.
Have you got some documentation for what you are doing. I can't find something, that looks like your code.
Oh - you are not using Angular UI Bootstrap Datepicker but jQuery UI Datepicker.
So you have to set this value: http://api.jqueryui.com/datepicker/#option-minDate
...
dateFormat:'dd-M-yy',
showOn: 'both',
buttonImage: "/e/images/calendar-ui.gif",
buttonImageOnly: true,
buttonText:'Choose a Date',
minDate: attrs.min, // get the value of the "min" attribute - maybe you should take care that it is really a date
...
Just like: http://plnkr.co/edit/MyduNfrchgsuD9mAYOEU?p=preview