Bootstrap UI Datepicker Popup not working after 2.1.4 update

Question

I have the following code snippet that was working fine in my web application utilising the Bootstrap UI library v0.14.3:

HTML:

<div class="form-group">
    <label for="dateSelection">Reporting Period:</label>
    <div class="input-group input-group-sm right-align">
        <input 
            id="dateSelection" 
            type="text" 
            class="form-control" 
            uib-datepicker-popup="{{ format }}" 
            popup-placement="bottom-right" 
            ng-model="date" 
            is-open="Calendar.opened" 
            datepicker-options="calendarOptions" 
            ng-required="true" 
            close-text="Close" 
            on-open-focus="false" 
            ng-change="chooseCustomDate( date )" 
            ng-disabled="true" />
                <span class="input-group-btn">
                    <button 
                        type="button" 
                        class="btn btn-default" 
                        ng-click="openCalendar()">
                        <i class="fa fa-calendar"></i>
                    </button>
                </span>
    </div>

</div>

Controller:

        var yesterdayDate = moment().subtract( 1, 'days' );
        $scope.selectedDate = $filter('date')( new Date( yesterdayDate ), 'yyyy-MM-dd' );
        $scope.forecastVarianceErrors = [];
        $scope.LBossVarianceErrors = [];
        $scope.PortalDifferenceErrors = [];
        $scope.date = $scope.selectedDate;
        $scope.dtInstance = {};
        $scope.showPortalDifferences = true;
        $scope.showLBossVariances = true;
        $scope.showForecastVariances = false;
        $scope.format = 'EEEE, d MMMM, yyyy';


        /*
         * Reporting Period
         *
         */
        $scope.chooseCustomDate = function( date ) {

            // Set the new date
            $scope.selectedDate = $filter('date')( new Date( date ), 'yyyy-MM-dd' );

            // Empty the variance arrays
            $scope.forecastVarianceErrors = [];
            $scope.LBossVarianceErrors = [];
            $scope.PortalDifferenceErrors = [];

            // Redraw the datatable
            $scope.dtInstance.reloadData();

        };


        $scope.openCalendar = function() {

            $scope.Calendar.opened = true;

        };


        $scope.Calendar = {

            opened: false

        };


        $scope.calendarOptions = {
            startingDay: 1  
        };

However, recently I required a feature to the Bootstrap UI's Popover element that was only available in v2.1.4 so I decided to make the transition to the latest version.

After updating, I noticed that all of my Datepicker Popups have now stopped working. I don't receive any errors, just simply the popup never seems to open. I am struggling to find information on what may have changed to see if I am now missing something, or need to alter my code in any way.

If I revert back to v0.14.3, my Datepicker Popups will start working again. Any help appreciated.

Answer 1

Well it seems that I was the cause of my own demise. Within my control, I added the ng-disabled tag to the <input> field to prevent any user from manually tampering with the date string. This seemed to be an allowed behaviour of v0.14.3, however, v2.1.4 was not so accommodating.

By changing the ng-disabled to a readonly tag, it allowed the calendar control to once again be drawn.

Also I found that v2.1.4 wants new Date(); specified for the ng-model or it fails to render the date string within the <input> field.