Bootstrap UI Datepicker Popup 在 2.1.4 更新后不起作用答案

【问题标题】：Bootstrap UI Datepicker Popup not working after 2.1.4 updateBootstrap UI Datepicker Popup 在 2.1.4 更新后不起作用
【发布时间】：2017-02-12 05:08:16
【问题描述】：

我的以下代码 sn-p 在我的 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  
        };

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

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

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

【问题讨论】：

标签： angularjs datepicker angular-ui-bootstrap

【解决方案1】：

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

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

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

【讨论】：