日期选择器弹出窗口不起作用答案

【问题标题】：Datepicker Popup isn't working日期选择器弹出窗口不起作用
【发布时间】：2017-11-22 16:24:06
【问题描述】：

我的 angularjs 项目中的 datepicker 有问题。

我在控制台中没有任何错误，但日期选择器运行不正常。在我的项目中看起来像这样：

我正在使用来自引导站点 http://angular-ui.github.io/bootstrap/#!#%2Fdatepicker 的代码

我的代码：

angular.module('CarRentalSystem')
.controller('CarController', function($http, $scope, AuthService, 
filterFilter) {


    $scope.today = function() {
        $scope.dt = new Date();
    };
    $scope.today();

    $scope.clear = function() {
        $scope.dt = null;
    };

    $scope.inlineOptions = {
        customClass: getDayClass,
        minDate: new Date(),
        showWeeks: true
    };

    $scope.dateOptions = {
        dateDisabled: disabled,
        formatYear: 'yy',
        maxDate: new Date(2020, 5, 22),
        minDate: new Date(),
        startingDay: 1
    };

    // Disable weekend selection
    function disabled(data) {
        var date = data.date,
            mode = data.mode;
        return mode === 'day' && (date.getDay() === 0 || date.getDay() === 
    6);
    }

    $scope.toggleMin = function() {
        $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : 
   new Date();
        $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
    };

    $scope.toggleMin();

    $scope.open1 = function() {
        $scope.popup1.opened = true;
    };

    $scope.open2 = function() {
        $scope.popup2.opened = true;
    };

    $scope.setDate = function(year, month, day) {
        $scope.dt = new Date(year, month, day);
    };

    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 
    'shortDate'];
    $scope.format = $scope.formats[0];
    $scope.altInputFormats = ['M!/d!/yyyy'];

    $scope.popup1 = {
        opened: false
    };

    $scope.popup2 = {
        opened: false
    };

    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    var afterTomorrow = new Date();
    afterTomorrow.setDate(tomorrow.getDate() + 1);
    $scope.events = [
        {
            date: tomorrow,
            status: 'full'
        },
        {
            date: afterTomorrow,
            status: 'partially'
        }
    ];

    function getDayClass(data) {
        var date = data.date,
            mode = data.mode;
        if (mode === 'day') {
            var dayToCheck = new Date(date).setHours(0,0,0,0);

            for (var i = 0; i < $scope.events.length; i++) {
                var currentDay = new 
     Date($scope.events[i].date).setHours(0,0,0,0);

                if (dayToCheck === currentDay) {
                    return $scope.events[i].status;
                }
            }
        }

        return '';
    }

});

我的看法 https://pastebin.com/g2c6THv0

还有我的 index.html（也许我使用了错误的脚本）

<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
</head>
<body>
<script

 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
 </script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-
 router/0.3.2/angular-ui-router.js"></script>

<!-- Including jquery and twitter bootstrap -->
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

感谢您的帮助！

【问题讨论】：

描述问题。“它运行得不好”不是问题陈述。在问题的标题中简要说明问题。

标签： javascript jquery css angularjs twitter-bootstrap

【解决方案1】：

您的应用指向 jQuery 引导插件，将其更改为 ui bootstrap（即 Angularjs Bootstrap）插件

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

到

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

或者你可以从https://angular-ui.github.io/bootstrap/#!#getting_started下载插件

【讨论】：