Montag, Januar 20, 2020

Bootstrap-DatePicker-innen Modal funktioniert nicht

Habe ich diesen datepicker innerhalb eines modalen aber nicht funktioniert. Ich habe bereits versucht, einige der codes, die ich sah im forum, aber keiner von Ihnen arbeitet. Könnte das ein javascript problem? Ich bin nicht sicher, was macht es nicht zu zeigen, das datepicker,wer kann mir bitte helfen vielen Dank Bootstrap-DatePicker-innen Modal funktioniert nicht

JS:

<script>
$(document).ready(function() {
    $('#datePicker')
        .datepicker({
            format: 'mm/dd/yyyy'
        })
        .on('changeDate', function(e) {
            //Revalidate the date field
            $('#eventForm').formValidation('revalidateField', 'date');
        });

    $('#eventForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: 'The name is required'
                    }
                }
            },
            date: {
                validators: {
                    notEmpty: {
                        message: 'The date is required'
                    },
                    date: {
                        format: 'MM/DD/YYYY',
                        message: 'The date is not a valid'
                    }
                }
            }
        }
    });
});
</script>

HTML:

<div class="form-group">
        <label class="col-xs-3 control-label">Date</label>
        <div class="col-xs-5 date">
            <div class="input-group input-append date" id="datePicker">
                <input type="text" class="awe-calendar" name="date" />
                <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
        </div>
    </div>

  • laden Sie die jquery und bootstrap.min.js am Ende des body-Tags
  • ich habe bereits Last es am Ende des body-Tags.
  • der datepicker funktioniert, aber es ist die Anzeige über dem Eingabefeld
  • Was meinst du? der datepicker wird nicht angezeigt.
  • Ich kann nicht klicken Sie auf das Kalender-logo.
  • Da das Kalender-logo ist nur in einem span in div ‚ s
  • es gibt Fehler in Ihrem code in $('#eventForm').formValidation({ diese Zeile
  • überprüfen Sie das jsbin jsbin.com/rezufa/edit?html,css,js,output

6 Kommentare

  1. 8

    hinzufügen z-index oberhalb 1051 in der Klasse datepicker

    fügen Sie so etwas wie diese Seite oder css –

    <style>
      .datepicker{z-index:1151 !important;}
    </style>
    • Funktioniert immer noch nicht 🙁
    • Bekommst du irgendwelche Fehler in der Konsole ?
    • ich habe keine Fehler 🙁
    • Versuchen Sie, um zu Debuggen, damit Sie wissen, wo es schief geht
    • Ich habe es versucht, kann ich senden Sie die Dateien? können Sie mir helfen. -.-
    • Eine plunker oder ein JSFiddle..

  2. 2

    Dem gleichen Problem Stand ich, die beste Methode ist, bitte überprüfen Sie den untenstehenden code, die ich verwendet, um dieses Problem zu beheben. Das wird funktionieren, wen Sie auf jeden, wo im Körper

    Bitte fügen Sie die gerade oben

    div-Modell-Körper

        <script>
          $(document).on("click", ".modal-body", function () {
           $("#datepicker").datepicker({
             dateFormat: 'yy-mm-dd'                                    
             });
              });  
        </script> 
     <div class="modal-body">
    • wie, wenn ich mit bereit?
  3. 1

    Machte ich eine Beispiel-Anwendung für Sie zu zeigen. Seine Arbeit fein

    <!DOCTYPE html>
    <html>
    <head>
        <title>The Date</title>
        <meta charset="utf-8" /> 
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
        <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
        <script>
            $(function () {
                $('#datetimepicker1').datepicker({
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="">&nbsp;</div>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                Launch demo modal
            </button>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Pick your Date</h4>
                    </div>
                    <div class="modal-body">
                        <input id="datetimepicker1" type="text" class="form-control" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div> 
    </body>
    </html>
  4. 1

    Ich habe ähnliches Problem und nach mehreren Stunden, die ich gefunden habe, diese einfache, aber nützliche Antwort in css.

    Wenn Sie jquery verwenden möchten, nachdem Sie rufen den modal, können Sie dies so tun:

    $('#infoModal').modal('show');
    $('#infoModal').on('shown.bs.modal', function(e) {
        $('.bootstrap-datetimepicker-widget').css('z-index', 1500);
    });

    Dank Alfredo

  5. 0

    fügen Sie diese:

    $('#datePicker')
        .datepicker({
            format: 'mm/dd/yyyy',
             beforeShow: function () {
                  setTimeout(function () {
                      $('.ui-datepicker').css('z-index', 99999);
                  }, 0);
              }
        })
        .on('changeDate', function(e) {
            //Revalidate the date field
            $('#eventForm').formValidation('revalidateField', 'date');
        });

Kostenlose Online-Tests