Prevent selection of weekend dates in Angular Bootstrap datepicker with a personalized directive

Question

Prevent selection of weekend dates in Angular Bootstrap datepicker with a personalized directive

I have integrated the Angular Bootstrap datepicker plugin into my Angular application.

To customize the date pickers in my app, I created a custom directive. In certain places, I need to disable weekends in the date picker. I have added the functions to disable weekend dates within the directive itself.

However, the function to disable weekend dates works perfectly fine when not used within the directive.

This is 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 am not sure how to pass the date-disabled="disabled(date, mode)" parameter into the directive to dynamically disable weekend dates.

Within the directive, I have defined date-disabled as disable: "&dateDisabled" and used it in the template as date-disabled="disable".

Any advice or recommendations are greatly appreciated.

Thank you in advance.

javascript angularjs angularjs-directive datepicker angular-strap

Answer 1

Answer №1

When defining the disabled function within your custom datePic directive, there is no requirement to pass it in to your custom directive at all.

However, a modification needs to be made to the template within your directive. It should refer to the disabled function defined in the link function of your custom directive. This is how it should appear:

date-disabled="disabled(date, mode)"

.

If you wish to only disable weekends on certain occasions, consider passing a parameter to your custom directive to manage this.

View the modified Jsfiddle with the suggested changes.

Alternatively, if you specifically intend to pass a custom disabled function to your directive, refer to this Jsfiddle where the disabled function is now defined outside the directive in a controller.

Answer 2

When defining the disabled function within your custom datePic directive, there is no requirement to pass it in to your custom directive at all.

However, a modification needs to be made to the template within your directive. It should refer to the disabled function defined in the link function of your custom directive. This is how it should appear:

date-disabled="disabled(date, mode)"

.

If you wish to only disable weekends on certain occasions, consider passing a parameter to your custom directive to manage this.

View the modified Jsfiddle with the suggested changes.

Alternatively, if you specifically intend to pass a custom disabled function to your directive, refer to this Jsfiddle where the disabled function is now defined outside the directive in a controller.

Answer 3

Answer №2

<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>

Answer 4

<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>

Prevent selection of weekend dates in Angular Bootstrap datepicker with a personalized directive

Answer №1

Answer №2

Similar questions

What steps should I follow to utilize a JavaScript dependency following an NPM installation?

Vue.js not populating select option tags

Release a stationary element upon scrolling down the page

Is there a way to display a message box on initial page load only, using JavaScript or jQuery?

Utilize specific Angular JS methods just a single time

How can you connect templates to actions and models in AngularJS directives?

Using setInterval with Internet Explorer 10

How can I show two ng-bind items side by side in Angular JS?

"Discover the power of Node.js and AngularJS for creating clean and user-friendly URLs

Deliver REST-API information on a webpage securely without revealing the API endpoint

Please consider opening in a new tab rather than a new window

What is the best way to include a MongoDB match argument when it is received from the frontend, and to exclude it if it is not provided?

What is the best way to manage communication with a database in a Node.js application?

Can you explain the distinction between using destructuring syntax and an empty parameter when calling a render function?

"First Screen Scrolling initiates the functionality of the Bottom Sticky Menu

Guide to designing a unique shape in JointJs by combining multiple basic shapes together

What is the method for transmitting a YAML file in the form of a base64 encoded string?

Having trouble with your angular.jg ng controller functioning properly?

My Vue.js modal component isn't functioning as expected

How to effectively expose a node controller function for testing in Mocha