Disable weekends on angular bootstrap datepicker with custom directive
I am using Angular datapicker boot plugin in my Angular app.
I wrote a custom directive for date pickers in my application. And I want to disable weekends in the date picker at specific locations. I have given functions that prohibit weekends inside the directive itself.
The disable weekend feature works great when not used inside a directive.
My custom directive:
app.directive('datePic', function(){
return {
restrict: 'E',
scope: {
control: "=ngModel",
min: "=minDate",
max: "=maxDate",
disable: "&dateDisabled"
},
template: '<div class="col-sm-6"><div class="input-group"><input type="text" class="form-control" datepicker-popup is-open="opened1" ng-model="control" min-date="min" max-date="max" date-disabled="disable" close-text="Close" /><span class="input-group-btn"><button type="button" id="btn2" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button></span></div></div>',
link: function(scope, elem, attrs){
scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
scope.opened1 = true;
};
scope.disabled = function(date, mode) {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
};
scope.toggleMin = function() {
scope.minDate = scope.minDate ? null : new Date();
};
scope.toggleMin();
}
}
})
HTML:
<div class="form-group has-feedback">
<label for="inputEmail3" class="col-sm-3 control-label"><span>*</span>From :</label>
<date-pic ng-model="data.leaveFromDate" min-date="minDate" max-date="maxdate" date-disabled="disabled(date, mode)"></date-pic>
</div>
<div class="form-group has-feedback">
<label for="inputEmail3" class="col-sm-3 control-label"><span>*</span>To :</label>
<date-pic ng-model="data.leaveToDate" min-date="data.leaveFromDate" max-date="data.leaveToDate" date-disabled="disabled(date, mode)"></date-pic>
</div>
I don't know how to pass date-disabled = "disabled (date, mode)" to the directive so that weekend can be disabled dynamically.
I assigned a disabled date inside the directive how to disable: "& dateDisabled" and used it in the template as date-disabled = "disable" .
Any suggestions or recommendations greatly appreciated.
Thanks in advance.
source to share
Since you are defining your function disabled
in your custom directive datePic
, there is no need to pass it in your custom directive at all.
You need to make changes to the template in your directive. It should refer to the function disabled
that you defined in the function of link
your custom directive. Thus, it would look like this: date-disabled="disabled(date, mode)"
.
If you want to disable weekends occasionally, I would pass a parameter to your custom directive to control that.
Working Jsfiddle here with the above changes 3.
If you specifically want to pass a custom disable function to your directive, this is the Jsfiddle that does it. Note that the disabled function is now defined outside the directive in the controller.
source to share
<script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
enter code here
<div ng-app="myApp" ng-controller="myCntrl">
From Date:
<input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="dt" is-open="showdp"
date-disabled="disabled(date, mode)" />
<span>
<button type="button" class="btn btn-default" ng-click="showcalendar($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<script language="javascript">
angular.module('myApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('myApp').controller('myCntrl', function ($scope) {
$scope.today = function () {
$scope.dt = new Date();
};
$scope.mindate = new Date();
$scope.dateformat="dd/MM/yyyy";
$scope.today();
$scope.showcalendar = function ($event) {
$scope.showdp = true;
};
$scope.showdp = false;
$scope.disabled = function (date, mode) {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
};
});
</script>
</form>
source to share