Question

我有以下代码片段在我的Web应用程序中使用Bootstrap UI库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>

控制器：

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

但是，最近我需要一个仅在v2.1.4中可用的Bootstrap UI的Popover元素的功能，所以我决定转换到最新版本。

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

如果我恢复到v0.14.3，我的Datepicker弹出窗口将重新开始工作。任何帮助表示赞赏。

Answer 1

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

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

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

2.1.4更新后Bootstrap UI Datepicker Popup无法正常工作

1 个答案: