ブートストラップモーダルで使用されている間、ブートストラップdatetimepickerが矛盾を示しています

Question

タイトルに示されているように、ブートストラップ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> 

をとEGの目的で、同じファイル内のスクリプト：ここ

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

これらのスクリプトとリンクファイルをすべて読み込もうとしたときに何か不足していますか？その理由の1つはわかっているようです。注文が邪魔されても、カレンダーはまったく動作しないことはわかっていますが、

私は真剣に混乱しています。更新ここ

を私を助けてください：

私は角度モーダルサービスが、まだ、解決できないことは、日付ピッカーと競合するかもしれないものですが、その私の研究でそれを絞り込みます。

これは私のモーダルサービスです：

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

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