La mise en œuvre de DatePicker de jQuery dans le Bootstrap modal

Créé jsfiddle pour mon problème http://jsfiddle.net/sudiptabanerjee/93eTU/

Dans la fenêtre modale question sur Changer de Mois et de Changer l'Année de combos.

a) IE 11: tout fonctionne comme prévu
b) Version de Chrome 31, Sur le mois de liste déroulante sélectionner, bootstrap modal peaux.
c) Firefox v26, le Mois et l'Année déroulante n'est pas fonctionnelle.

S'il vous plaît aider.

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"
});
InformationsquelleAutor Sudipta Banerjee | 2014-01-11
  1. 48

    C'est parce que le modal applique concentrer sur lui-même. Voici une solution pour ce comme mentionné ici . Ajouter le script ci-dessous pour que votre fichier js. C'est tout.

    Travail De Démonstration

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

    Pour Bootstrap 4: 

    replace : $.fn.modal.Constructor.prototype.enforceFocus
By: $.fn.modal.Constructor.prototype._enforceFocus
    • +1, j'ai été aussi à avoir ce problème et cette solution a fonctionné
    • Ajouté ce $seulement.fn.modal.Constructeur.le prototype.enforceFocus = function() {}; Son travail bien, Merci jsfiddle.net/sudiptabanerjee/93eTU/22. Mais pouvez-vous donner plus de détails sur d'autres codes et pourquoi il est nécessaire.
    • Voir ce post
    • Je reçois dans le navigateur (confModal n'est pas défini)
    • prendre un coup d'oeil ici.
    • Merci pour la Solution
    • N'ajoutant ceci: $.fn.modal.Constructeur.le prototype.enforceFocus = function() {}; devrait fonctionner. Le repos n'est pas nécessaire 🙂
    • Il fonctionne comme un charme. Merci

    InformationsquelleAutor Surjith S M
  2. 3

    jQuery version de @crftr réponse

    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;
}
    InformationsquelleAutor Akshay Gundewar
  3. 1

    PLUS FACILE... suffit de commenter cette ligne dans votre boostrap.js qu'.enforceFocus().

    • Faire des changements dans une bibliothèque pourrait semble plus facile pour vous, mais il pourrait devenir un cauchemar si vous voulez garder votre bibliothèque jusqu'à ce jour par la suite.
    InformationsquelleAutor Chris Baltazar
  4. 0

    Construction de Surjith réponse, j'ai ajouté un bloc try/catch pour résoudre une exception ReferenceError pour confModal est indéfini.

    Coffeescript:

    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
    InformationsquelleAutor crftr
  5. 0

    ajouter un z-index à votre datepicker classe

    InformationsquelleAutor Abdus Salam Azad