Bootstrap UI 日期选择器弹出窗口在 2.1.4 更新后不工作

Question

我有以下代码片段，它在我使用 Bootstrap UI 库 v0.14.3 的 Web 应用程序中运行良好：

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>

控制器：

        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  
        };

但是，最近我需要 Bootstrap UI 的 Popover 元素的一项功能，该功能仅在 v2.1.4 中可用，因此我决定过渡到最新版本。

更新后，我注意到我所有的 Datepicker Popups 现在都停止工作了。我没有收到任何错误，只是弹出窗口似乎永远不会打开。我正在努力查找有关可能已更改的内容的信息，以查看我现在是否遗漏了某些内容，或者是否需要以任何方式更改我的代码。

如果我恢复到 v0.14.3，我的日期选择器弹出窗口将再次开始工作。任何帮助表示赞赏。

Answer 1

好吧，看来我是自己的死因。在我的控制范围内，我将 ng-disabled 标记添加到 <input> 字段以防止任何用户手动篡改日期字符串。这似乎是 v0.14.3 允许的行为，但是 v2.1.4 并不那么通融。

通过将 ng-disabled 更改为 readonly 标记，可以再次绘制日历控件。

我还发现 v2.1.4 需要为 ng-model 指定 new Date();，或者无法在 <input> 字段中呈现日期字符串。

Bootstrap UI 日期选择器弹出窗口在 2.1.4 更新后不工作

Bootstrap UI Datepicker Popup not working after 2.1.4 update

datepicker

angularjs

angular-ui-bootstrap