I use Angularjs and so I use ui.bootstrap's Datepickers for Start Date and End Date. I would like to grey out all the dates that come before selected Start Date, but the problem is, even that "min" property gets set to new value, Datepicker in End Date is not aware of it and doesn't grey out values on End Date Datepicker. However if i scroll the month back and forth in End Date Datepicker it will initialize new min date value. What am i doing wrong?
HTML
<div ng-controller="DatepickerCtrl">
<div class="form-horizontal">
<input disabled type="text" datepicker-popup="MM/dd/yyyy" ng-model="dtStart" is-open="openedStart" min="minDateStart" max="maxDateStart" datepicker-options="dateOptions" date-disabled="disabledStart(date, mode)" ng-required="true" />
<button class="btn" ng-click="openStart()"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
<br />
<div class="form-horizontal">
<input disabled type="text" datepicker-popup="MM/dd/yyyy" ng-model="dtEnd" is-open="openedEnd" min="minDateEnd" max="maxDateEnd" datepicker-options="dateOptions" date-disabled="disabledEnd(date, mode)" ng-required="true" />
<button class="btn" ng-click="openEnd()"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>
app.js
myApp.controller('DatepickerCtrl', function ($scope, $timeout) {
$scope.minDateStart = 0;
$scope.maxDateStart = '2014-8-25';
$scope.minDateEnd = 0;
$scope.maxDateEnd = '2014-8-25';
$scope.$watch('dtStart', function () {
$scope.minDateEnd = $scope.dtStart;
});
$scope.today = function () {
$scope.dtStart = new Date();
};
$scope.today();
$scope.showWeeks = false;
$scope.disabledStart = function (date, mode) {
var compareDate = new Date();
compareDate.setDate(compareDate.getDate() - 1);
return (date < compareDate);
};
$scope.disabledEnd = function (date, mode) {
var compareDate = new Date();
compareDate.setDate(compareDate.getDate() - 1);
return (date < $scope.dtStart);
};
$scope.openStart = function () {
$timeout(function () {
$scope.openedStart = true;
});
};
$scope.openEnd = function () {
$timeout(function () {
$scope.openedEnd = true;
});
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
});
Also setting $scope.showWeeks = false;
has no effect what so ever and still showing weeks. Please advise.