Disable Dates Using Bootstrap datepicker - angularjs

Question

I am trying to disable some dates (eventually via an array I provide) using the datepicker control. However, it seems that nothing useful is passed in to the dateDisabled function. When I set a breakpoint in the developer tools, the first variable (which is set to data in the documentation examples) comes across as simply the number zero.
I have verified that the option itself works, as blankly returning a true disables all dates. What must I do to get valid inputs?
Note: I just discovered we are using angular-ui-bootstrap version 0.12.1.
JS
//options object for the datepicker control
$scope.dateOptions = {
dateDisabled: disableDates,
formatYear: "yyyy"
};
// Disable weekend selection
function disableDates(date, mode) {
//return mode === 'day' && (date.getDay() === 5 || date.getDay() === 6);
//return true;
return date === new Date(2016, 6, 18);
}
//Set the calendar open
$scope.openCalendar = function (e) {
e.preventDefault();
e.stopPropagation();
$scope.vm.is_cal_open = !$scope.vm.is_cal_open;
};
$scope.hasInvalidErrorDate = function (date) {
if (!date || date <= Date.parse("1/1/1900")) {
return true;
}
return false;
};
$scope.earliestErrorDate = Date.parse("1/1/1900");
HTML
<div class="col-sm-4">
<!-- Error Date -->
<div class="form-group" ng-class="{'has-error': hasInvalidErrorDate(vm.data.adjustment.error_date) && form.$dirty}">
<label for="error_date">Error Date</label>
<p class="input-group calendar-wrapper">
<!--input disabled the input so that it forces users to use the date picker and therfore ensure good input-->
<input type="text" datepicker-popup="MM/dd/yyyy"
title="Click the calendar button"
name="error_date"
datepicker-options="dateOptions"
class="form-control"
is-open="vm.is_cal_open"
width="5"
ng-disabled="true"
ng-model="vm.data.adjustment.error_date"
min-date="dateOptions.minDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default delegate-cal-btn" ng-click="openCalendar($event)"><i class="fa fa-calendar"></i></button>
</span>
</p>
<span class="text-danger small" ng-show="hasInvalidErrorDate(vm.data.adjustment.error_date) && form.$dirty">
Please select an error date
</span>
</div>
</div>

Answer 1

Working absolutely fine.
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function() {
$scope.dt = null;
};
$scope.inlineOptions = {
customClass : getDayClass,
minDate : new Date(),
showWeeks : true
};
$scope.dateOptions = {
formatYear : 'yy',
maxDate : new Date(2199, 12, 31),
minDate : new Date(),
startingDay : 1
};
$scope.toggleMin = function() {
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null
: new Date();
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
};
$scope.toggleMin();
$scope.open1 = function() {
$scope.popup1.opened = true;
};
/*
* $scope.open2 = function() { $scope.popup2.opened =
* true; };
*/
$scope.setDate = function(year, month, day) {
$scope.dt = new Date(year, month, day);
};
$scope.formats = [ 'dd-MMMM-yyyy', 'yyyy/MM/dd',
'dd.MM.yyyy', 'shortDate' ];
$scope.format = $scope.formats[0];
$scope.altInputFormats = [ 'M!/d!/yyyy' ];
$scope.popup1 = {
opened : false
};
$scope.dateOptions = {
dateDisabled: disabled,
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
};
// Disable weekend selection
function disabled(data) {
var date = data.date,
mode = data.mode;
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
}
/*
* $scope.popup2 = { opened : false };
*/
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [ {
date : tomorrow,
status : 'full'
}, {
date : afterTomorrow,
status : 'partially'
} ];
function getDayClass(data) {
var date = data.date, mode = data.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 '';
}