在VacController中

Question

正如标题所示，bootstrap datetimepicker填充在内部，用于需求的模态。但是，我发现日期选择器有很多不一致之处，因为它有时会弹出，有时它不会。我并不理解究竟发生了什么，因为当鼠标点击后它没有弹出时，控制台也没有显示任何内容。

以下是我使用的模态代码：

<div class="modal fade">
<div class="modal-dialog" style="top:50px;width:1150px">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close"
                    ng-click="close(false)" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title"><b>{{'Vacation Setting'}}</b></h4>
        </div>
        <div class="modal-body" style="display:block;overflow:auto;min-height:340px">
            <!--<canvas id="processViewCanvas" width="800" height="800"></canvas>-->
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-striped" style="border-collapse:collapse;border:1px solid black;margin-left:auto;margin-right:auto;">
                        <tr>                             
                            <th style="border-collapse: collapse; border: 1px solid black; padding: 5px; width: 200px;">FromDate</th>
                            <th style="border-collapse: collapse; border: 1px solid black; padding: 5px; width: 200px;">ToDate</th>                               
                        </tr>
                        <tr>

                            <th style="border-collapse:collapse;border:1px solid black; padding:5px;">
                                <div class="form-group">
                                    <div class='input-group date' id='datetimepickerfromDate'>
                                        <input id="fdata" type='text' class="form-control" ng-model="object.fdate" /> <!-- is-open="datePickerOne.opened" -->
                                        <span class="input-group-addon" ng-click="openStartDatePicker($event)">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </th>
                            <th style="border-collapse:collapse;border:1px solid black; padding:5px;">
                                <div class="form-group">
                                    <div class='input-group date' id='datetimepickertoDate'>
                                        <input id="tdata" type='text' class="form-control" ng-model="object.tdate" />
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </th>

                        </tr>
                    </table>
                </div>
            </div>
            <!--<div class="row" style="margin-top:40px;margin-left:40px;">
                <div class="col-md-4"></div>
                <div class="col-md-4" style="padding-top:5px;padding-left:10px; margin-top:5px;">
                    <button class="btn btn-primary ebs-btn" type="button" ng-click="btnExecute()" ng-disabled="exceptionChk">
                        Submit&nbsp;
                    </button>
                </div>
            </div>-->
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary ebs-btn" type="button" ng-click="btnExecute()" ng-disabled="exceptionChk">
                Submit&nbsp;
            </button>
            <button type="button" ng-click="close(true)" class="btn btn-primary ebs-btn" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

和脚本在同一个文件中用于例如：

<script type="text/javascript">
    $(function () {
        $('#datetimepickerfromDate').datetimepicker({
            format: 'YYYY-MM-DD'

        });
        $('#datetimepickertoDate').datetimepicker({
            format: 'YYYY-MM-DD',
            minDate: 'now'
        });
        $("#datetimepickerfromDate").on("dp.change", function (e) {
            var presentDate = new Date();
            var dateSelected = e.date;
            if (dateSelected > presentDate) {
                $('#datetimepickertoDate').data("DateTimePicker").minDate(e.date);
            }
            else {
                //presentDate.setDate(presentDate.getDate() - 1);
                $('#datetimepickertoDate').data("DateTimePicker").minDate(moment().millisecond(0).second(0).minute(0).hour(0));
            }
        });
        $("#datetimepickertoDate").on("dp.change", function (e) {
            $('#datetimepickerfromDate').data("DateTimePicker").maxDate(e.date);

        });
    });
</script>

以下是访问应用程序时脚本文件正在加载的主文件：

<link rel="stylesheet" href="styles/bootstrap.min.css" />
<link rel="stylesheet" href="styles/font-awesome.min.css">    <
<link href="Content/angular-chart.css" rel="stylesheet" />
<link href="Content/tabdrop/tabdrop.css" rel="stylesheet" />
<link href="styles/bootstrapdatetimepicker.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script>window.jQuery || document.write('<script src="scripts/jquery-1.11.2.min.js"><\/script>')</script>

<script src="Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/angular-ui-router.js"></script>
<script src="Scripts/angular-animate.min.js"></script>
<script src="Scripts/angular-cookies.min.js"></script>
<script src="Scripts/spin.min.js"></script>
<script src="Scripts/jsonpath.js"></script>   
<script src="Scripts/moment.min.js"></script>
<script src="Scripts/moment-duration-format.js"></script>
<script src="Scripts/underscore.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="Scripts/Chart.min.js"></script>
<script src="Scripts/Chartjs_Stacked.js"></script>
<script src="Scripts/angular-chart.js"></script>
<script src="Scripts/angular-resource.min.js"></script>
<script src="Scripts/angular-modal-service.min.js"></script>
<script src="Scripts/angular-sanitize.min.js"></script>   
<script src="Scripts/tabdrop/bootstrap-tabdrop.js"></script>
<script src="Scripts/jquery.ba-hashchange.js"></script>
<script src="Scripts/bootstrapdatetimepicker.js"></script>

当我尝试加载所有这些脚本和链接文件时，我是否缺少某些订单，因为我知道这可能是其中一个原因。虽然，我知道如果订单受到干扰，日历将根本不起作用。

我很困惑。请帮帮我

更新：

我将研究结果视为Angular Modal Service可能与datepicker冲突，但仍然无法解决。

这是我的模态服务：

   ModalService.showModal({
                templateUrl: "views/Reassign/VacationSetting.html",
                controller: "VacController",
                inputs: {
                    modalData: {}
                }
            }).then(function (modal) {
                // The modal object has the element built, if this is a bootstrap modal
                // you can call 'modal' to show it, if it's a custom modal just show or hide
                // it as you need to.
                modal.element.modal();
                modal.close.then(function (result) {
                    return result;
                });
            });

有人能看到我错过的任何东西吗？ https://github.com/angular-ui/bootstrap/issues/2307 这完全是发生在我身上的事。尝试应用该链接中告知的任何内容，但无济于事。干杯

Answer 1

这可以解决您的情况。

$scope.$apply(function(){

  ModalService.showModal({
                templateUrl: "views/Reassign/VacationSetting.html",
                controller: "VacController",
                inputs: {
                    modalData: {}
                }
            }).then(function (modal) {
                // The modal object has the element built, if this is a bootstrap modal
                // you can call 'modal' to show it, if it's a custom modal just show or hide
                // it as you need to.
                modal.element.modal();
                modal.close.then(function (result) {
                    return result;
                });
            });
}

在VacController中

angular.module('app').controller('VacController',
['$scope','close','$timeout','safeApply',
function ($scope,close,$timeout,safeApply) {
    $scope.dt = {};

safeApply($scope, function() {  
    //$scope.$watch('$viewContentLoaded', 
     $scope.$watch('dt.value',
            function() { 
                $timeout(function() {


        $('#datetimepickerfromDate').datetimepicker({
            format: 'YYYY-MM-DD'

        });
        $('#datetimepickertoDate').datetimepicker({
            format: 'YYYY-MM-DD',
            minDate: 'now'
        });
        $("#datetimepickerfromDate").on("dp.change", function (e) {
            var presentDate = new Date();
            var dateSelected = e.date;
            if (dateSelected > presentDate) {
                $('#datetimepickertoDate').data("DateTimePicker").minDate(e.date);
            }
            else {
                //presentDate.setDate(presentDate.getDate() - 1);
                $('#datetimepickertoDate').data("DateTimePicker").minDate(moment().millisecond(0).second(0).minute(0).hour(0));
            }
        });
        $("#datetimepickertoDate").on("dp.change", function (e) {
            $('#datetimepickerfromDate').data("DateTimePicker").maxDate(e.date);

  },0);    
        });
    });

    }]);

在您的modaltemplate.html中

.......................
<div class="modal-body">
    //ADD dt.value to enclose <div id='datepicker'> 
          <div ng-model="dt.value">
                <div id='datepicker'></div>
            </div>

Answer 2

Example

.dropdown-menu {
    font-family: Segoe UI Emoji;
    font-size: 12px;
    font-style: normal;
    max-height: 230px;
    overflow-x: auto;
    z-index: 1050;
}

Bootstrap datetimepicker在bootstrap模态

2 个答案:

在VacController中

在您的modaltemplate.html中