3

Wie der Titel andeutet, wird der Bootstrap datetimepicker innerhalb von modal für die Anforderung gefüllt. Aber ich sehe eine Menge Inkonsistenz vom Datepicker, wie es manchmal auftaucht und manchmal nicht. Ich verstehe nicht, was genau passiert, da die Konsole auch nichts zeigt, wenn sie nach einem Mausklick nicht erscheint.Bootstrap datetimepicker mit Inkonsistenz beim Bootstrap-Modal

Hier modal Code Ich verwende:

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

Und das Skript in der gleichen Akte für zB Zwecke:

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

Hier wird die Master-Datei, die von den Skripten Dateien werden geladen, wenn auf die Anwendung zugegriffen wird:

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

Gibt es eine Reihenfolge, die ich vermisse, wenn ich versuche, alle diese Skripte und Link-Dateien zu laden, wie ich weiß, könnte einer der Gründe. Obwohl ich weiß, dass der Kalender überhaupt nicht funktioniert, wenn die Reihenfolge gestört ist.

Ich bin ernsthaft verwirrt. Bitte helfen Sie mir hier aus

Update:

ich es verengte mit meiner Forschung vor, dass Angular Modal-Service, was das ist mit dem Datepicker könnte in Konflikt, aber nach wie vor nicht in der Lage zu lösen.

Das ist mein Modal Service:

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

Könnte jemand etwas sehen, dass ich verpasst? https://github.com/angular-ui/bootstrap/issues/2307 Das ist genau das passiert mir. Versucht, das zu übernehmen, was in diesem Link gesagt wurde, aber ohne Erfolg. Prost

+0

Menschen. Irgendwelche Ideen? Ich bin immer noch geschlagen – San

+0

Haben Sie es gelöst? – fracz

Antwort

-1

Example

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

Funktioniert nicht. :( – San

Verwandte Themen