<!doctype html>
<html ng-app="plunker">
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <div ng-controller="MainController">
        <h3> Select Days </h3>
        <div uib-datepicker ng-model="selectedDate" datepicker-options="options"></div>
        <hr />
        <span>Selected date: {{selectedDate.toISOString().substr(0,10)}}</span>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.3/ui-bootstrap-tpls.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

angular.module('plunker', ['ui.bootstrap'])
.controller("MainController", ["$scope", function($scope) {
  // Available dates, you can only select this days in the datepicker, try yourself!
  $scope.availableDates = ["2017-11-19", "2017-11-20", "2017-11-21", "2017-11-22", "2017-11-23"];
  
  // Preselect first available date
  $scope.selectedDate = new Date($scope.availableDates[0] + "T00:00:00Z");

  // Datepicker options
  $scope.options = {
    dateDisabled: disabledDates
  };

  // Returns true if date is in available dates list, false in other case
  function isDateAvailable(date) {
    if ($scope.availableDates.indexOf(date.toISOString().substr(0,10)) !== -1) {
      return true;
    }

    return false;
  }
        
  // Returns false if date should be disabled
  function disabledDates(dateAndMode) {
    var date = dateAndMode.date,
        mode = dateAndMode.mode;

    return (mode === 'day' && !isDateAvailable(date));
  }
}]);
/* Styles go here */