28

Erstellt jsfiddle für mein Problem http://jsfiddle.net/sudiptabanerjee/93eTU/Implementieren von jQuery Datepicker in Bootstrap modal

In modalen Fenster Ausgabe ist auf Veränderung Monat und ändern Jahr Combos.

a) IE 11: Alles funktioniert wie erwartet b) Chrome Version 31, Im Monat Combo auswählen, Bootstrap Modal versteckt. c) Firefox v26, Monat und Jahr Dropdown ist nicht funktionsfähig.

Bitte helfen.

HTML

<!-- Button trigger modal --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> 
<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title" id="myModalLabel">Modal title</h4> 

     </div> 
     <div class="modal-body"> 
      <div class="col-md-12"> 
       <div class="row"> 
        <label for="idTourDateDetails">Tour Start Date:</label> 
        <div class="form-group"> 
         <div class="input-group"> 
          <input type="text" name="idTourDateDetails" id="idTourDateDetails" readonly="readonly" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span> 

         </div> 
        </div>Alt Field: 
        <input type="text" name="idTourDateDetailsHidden" id="idTourDateDetailsHidden"> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

CSS

.clsDatePicker { 
z-index: 100000; 
} 

JS

$('#idTourDateDetails').datepicker({ 
dateFormat: 'dd-mm-yy', 
minDate: '+5d', 
changeMonth: true, 
changeYear: true, 
altField: "#idTourDateDetailsHidden", 
altFormat: "yy-mm-dd" 
}); 

Antwort

46

Dies liegt daran, die modalen erzwingt auf sich selbst konzentrieren. Hier ist eine Lösung für diese wie erwähnt here. Fügen Sie das folgende Skript zu Ihrer js-Datei hinzu. Das ist es.

Working Demo

jQuery

// Since confModal is essentially a nested modal it's enforceFocus method 
// must be no-op'd or the following error results 
// "Uncaught RangeError: Maximum call stack size exceeded" 
// But then when the nested modal is hidden we reset modal.enforceFocus 
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus; 

$.fn.modal.Constructor.prototype.enforceFocus = function() {}; 

$confModal.on('hidden', function() { 
    $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn; 
}); 

$confModal.modal({ backdrop : false }); 
+2

+1, hatte ich auch dieses Problem und diese Lösung hat funktioniert – a7omiton

+4

Hinzugefügt nur $ .fn.modal.Constructor.prototype.enforceFocus = function() {}; Es funktioniert gut Danke http://jsfiddle.net/sudiptananerjee/93eTU/22/. Aber können Sie mehr Details zu anderem Code angeben und warum ist es notwendig? –

+0

@SudiptaBanerjee Siehe ** [this post] (http://stackoverflow.com/questions/13649459/twitter-bootstrap-multiple-modal-error/19190216#19190216) ** –

0

Gebäude aus Antwort von Surjith ist, habe ich eine Ausnahme für Reference confModal undefined zu lösen ist, um eine try/catch-Block.

Coffee:

enforceModalFocusFn = $.fn.modal.Constructor::enforceFocus 

$.fn.modal.Constructor::enforceFocus = -> 

try 
    $confModal.on "hidden", -> 
    $.fn.modal.Constructor::enforceFocus = enforceModalFocusFn 
    return 
    $confModal.modal backdrop: false 
catch error 
    if error.name != 'ReferenceError' 
    throw error 
3

jQuery Version von @crftr Antwort

var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus; 
$.fn.modal.Constructor.prototype.enforceFocus = function() {}; 
try{ 
    $confModal.on('hidden', function() { 
     $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn; 
    }); 
    $confModal.modal({ backdrop : false }); 
} 
catch (error) { 
    if(error.name != 'ReferenceError') 
     throw error; 
} 
1

einfacher ... brauchen nur diese Zeile in Ihre boostrap.js that.enforceFocus() Stellung zu nehmen.

+2

Änderungen in einer Bibliothek könnten Ihnen leichter gefallen, aber es könnte ein Albtraum werden, wenn Sie Ihre Bibliothek danach auf dem neuesten Stand halten möchten. –

Verwandte Themen