Angular UI Datepicker. Enable only 5 days from today excluding weekends

Question

I am using Angular UI Bootstrap datepicker directive in my project. I have this specific need like I need to enable only 5 days from current day. In case of weekend, I need to disable them and enable the remaining days. for eg, If current day in Friday, I need to enable fri, mon, tue, web, thurs. I am using dateDisabled property to achieve this. Problem is all past month dates are also getting enabled. Also I think the solution I came up is not elegant. Below is my markup and code. Kindly help me. Thank you in advance.

 <input show-weeks="false" ng-click="vm.openDate()" name="quotedate" type="text" class="form-control" ng-model-options="{timezone:'UTC'}" uib-datepicker-popup="dd/MM/yyyy" ng-model="vm.quote.date" is-open="vm.quotedate.opened" datepicker-options="vm.dateOptions" required close-text="Close" readonly="true"/> 

vm.dateOptions = {
     dateDisabled: disabled,
     minDate: today            
};

function disabled(data) {
        var date = data.date,
            mode = data.mode;
        if (today.getDay() === 0 || today.getDay() === 6) {
            return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 5 );
        }else if (today.getDay() === 1) {
            return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 4 );
        }else {
            return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 6 );
        }
}

Bennett Adams · Accepted Answer · 2016-05-24T14:07:56.387

What you are looking for are the min-date, max-date, and date-disabled attributes, as described in the docs. The date-disabled function in this example is pulled directly from the docs, and in order to confine the available date range, simply set the min-date attribute to the current datetime:

vm.dt = new Date();
vm.minDate = angular.copy(vm.dt);

...and the max-date to five days from now:

var fiveDaysFromNow = angular.copy(vm.dt);
fiveDaysFromNow.setDate(fiveDaysFromNow.getDate() + 5);
vm.maxDate = fiveDaysFromNow;

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
  
  var vm = this;
  
  function today() {
    vm.dt = new Date();
  }
  
  today(); 
  
  vm.opened = false;

  vm.openDatePopup = function() {
    vm.opened = true;
  };

  // Disable weekend selection
  vm.disabled = function(date, mode) {
    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
  };
  
  vm.minDate = angular.copy(vm.dt);
  
  var fiveWeekdaysFromNow = angular.copy(vm.dt);
  fiveWeekdaysFromNow.setDate(fiveWeekdaysFromNow.getDate() + 7);
  vm.maxDate = fiveWeekdaysFromNow;

  vm.dateOptions = {
    formatYear: 'yy',
    startingDay: 0
  };

  vm.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  vm.format = vm.formats[0];

});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <style>
      .full button span {
        background-color: limegreen;
        border-radius: 32px;
        color: black;
      }
      .partially button span {
        background-color: orange;
        border-radius: 32px;
        color: black;
      }
    </style>
    <div ng-controller="DatepickerDemoCtrl as demo">
      <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
          <p class="input-group">
            <input type="text" 
                   class="form-control" 
                   uib-datepicker-popup="{{demo.format}}" 
                   ng-model="demo.dt" 
                   show-weeks="false"
                   is-open="demo.opened" 
                   min-date="demo.minDate" 
                   max-date="demo.maxDate" 
                   datepicker-options="demo.dateOptions" 
                   date-disabled="demo.disabled(date, mode)" 
                   ng-required="true" 
                   close-text="Close"/>
            <span class="input-group-btn">
              <button type="button" 
                      class="btn btn-default" 
                      ng-click="demo.openDatePopup()">
                <i class="glyphicon glyphicon-calendar"></i>
              </button>
            </span>
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

Hope this helps!

Hi thanks for the answer. This disables the weekends but also takes them into count. That is why I ended up putting the if else conditions. — logesh, May 24 '16 at 05:57
If you just want five weekdays in advance, then why wouldn't you just disable the weekends and add seven days rather than five (or add six, if you want five total available days, including today). No matter what day it is, you'll only be able to select the next five weekdays. I updated the example accordingly. — Bennett Adams, May 24 '16 at 14:12

Angular UI Datepicker. Enable only 5 days from today excluding weekends

1 Answers1