I am utilizing a jQuery-ui datapicker and have developed a directive to initialize it (credit: ). Now, I intend to include an HTML attribute that determines the function to call when deciding whether a day should be selectable in the datepicker. How can I achieve this?
Here is the JavaScript code:
//The directive for displaying the jquery-ui datepicker
myApp.directive('datepicker', function() {
return {
restrict: 'A',
require : 'ngModel',
link : function (scope, element, attrs, ngModelCtrl) {
$j(function(){
//Instantiate the datepicker
element.datepicker({
dateFormat:'dd/mm/yy',
beforeShowDay:function(date) {
//TODO Call the function defined in attrs, passing the date object as an argument
theDefinedFunction(date)
},
onSelect:function (date) {
ngModelCtrl.$setViewValue(date);
scope.$apply();
}
});
});
}
}
});
Here is the HTML code:
<input type="text" datepicker show-days="myShowDaysFunction()" />
The myShowDaysFunction() needs to be defined in the controller.
(Edit) - Controller function:
$scope.myShowDaysFunction = function(date) {
console.log("I am called"); //Logs to the console
console.log(date); //Logs undefined to the console
}
Thank you.