Dbrandt
Dbrandt

Reputation: 659

Angular Bootstrap UI Datepicker update minDate

This should be simple and I believed all my code is correct, but I suppose it is not.

I have two Datepickers. Datepicker 2 should be setting it's minDate to the value of datepicker 1. This works, as I can see the min-date attr updating when I select a date on Datepicker 1, but Datepicker 2 does not re-render the disabled dates. I feel like I should be refreshing the Datepicker somehow, but unsure how.

// Datepicker Controller
app.controller('datepickerController', ['$scope', function($scope) {

    // open depart date
    $scope.openDepartDatepicker = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        // open depart datepicker
        $scope.departDatepickerOpen = true;
    }

    // open return date
    $scope.openReturnDatepicker = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        // open return datepicker
        $scope.returnDatepickerOpen = true;
    }

    $scope.$watch('search.searchparams.journeys[0].departuredate',function(value){
        $scope.returnMinDate = value;
    });

    // minDate set intiitally
    $scope.departMinDate = new Date();
    $scope.returnMinDate = new Date();
    // date options
    $scope.departDateOptions = {};
    $scope.returnDateOptions = {};
    // date format
    $scope.dateFormat = 'EEE dd/MM/yyyy';

}]);

And here is the actual input

<input id="returnDate" placeholder="Returning" type="text" class="form-control" data-ng-model="search.searchparams.journeys[1].departuredate" datepicker-popup="{{dateFormat}}" data-ng-focus="openReturnDatepicker($event)" show-button-bar="false" min-date="{{returnMinDate}}" is-open="returnDatepickerOpen" datepicker-options="returnDateOptions" readonly=""/>

Nothing I have tried has made a difference. The new minDate is updating, but just not being applied to the Datepicker. I can actually see the updated min-date attribute in my inspector, so all values are updating as expected.

Any help appreciated

Upvotes: 0

Views: 588

Answers (1)

Dbrandt
Dbrandt

Reputation: 659

The issue is so simple and so silly.

min-date="{{returnMinDate}}"

needs to be

min-date="returnMinDate"

It smacked me right in the face this morning.

Upvotes: 1

Related Questions