JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="//codeorigin.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="//eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css">
<div ng-app="mainApp">
    <div ng-controller="mainController">  
        <div class="col-sm-12">
            <div>[{{message}}]</div>
            
            <input type="text" datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="bootstrapdatepicker" />
            
            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="fa fa-calendar-plus-o"></i></button>
           
        </div>
    </div>
</div>
<script https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js></script>

CSS

body {
    padding: 10px;
}
.full button span {
    background-color: limegreen;
    border-radius: 32px;
    color: black;
}
.partially button span {
    background-color: orange;
    border-radius: 32px;
    color: black;
}
.bootstrapdatepicker {
    width: 300px;
    margin: 10px 0 0 0;
}

JavaScript

angular.module('mainApp', []).controller('mainController', function($scope) {
    
    $scope.message = 'angular is working';
    
	$scope.today = function() {
		$scope.dt = new Date();
	};
  	$scope.today();

  	$scope.clear = function () {
		$scope.dt = null;
  	};

    // Disable weekend selection
    $scope.disabled = function(date, mode) {
        return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
    };
    
	//MIN AND MAX DATES
    $scope.toggleMin = function() {
        $scope.minDate = $scope.minDate ? null : new Date();
    };
    $scope.toggleMin();
  	$scope.maxDate = new Date(2020, 5, 22);

    $scope.open = function($event) {
        $scope.status.opened = true;
    };

    $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
    };

    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = $scope.formats[1];

    $scope.status = {
        opened: false
    };

    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    var afterTomorrow = new Date();
    afterTomorrow.setDate(tomorrow.getDate() + 2);
    $scope.events =
        [
        {
            date: tomorrow,
            status: 'full'
        },
        {
            date: afterTomorrow,
            status: 'partially'
        }
    ];

  $scope.getDayClass = function(date, mode) {
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);

      for (var i=0;i<$scope.events.length;i++){
        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

        if (dayToCheck === currentDay) {
          return $scope.events[i].status;
        }
      }
    }

    return '';
  };
});