Dienstag, Dezember 10, 2019

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

Letzte Fragen

Tun ItemView löst Blase?

Ich habe eine CompositeView für eine Tabelle. Ich habe Trigger-set in der Kind-ItemView für jede Zeile... var TableRow = Marionette.ItemView.extend({ tagName:...

Wie kann ich untersuchen, WCF was 400 bad request über GET?

Die folgenden WCF-endpoint funktioniert gut mit dem WCF test client: AssetList ListFlaggedAssets(short processCode, string platform, string endpoint = "null", string portalId = "null", int...

Bei der Verwendung von UUIDs, sollte ich auch mit AUTO_INCREMENT?

Wir bauen eine neue web-app, die eine offline-iPad - /Android-app-version auf einer Reihe von lokalen Geräten, die Einsätze mit neuen Daten. Als solche benötigen...

Actionscript-Objekt, das verschiedene Eigenschaften

Wie kann ich die Anzahl der Eigenschaften in einer generischen Actionscript-Objekt? (Wie die Array-Länge) InformationsquelleAutor Fragsworth | 2011-01-15

Wie plot mehrere Graphen und nutzen Sie die Navigations-Taste im [matplotlib]

Die neueste version von matplotlib erstellt automatisch Navigations-buttons unter den graph. Aber die Beispiele, die ich finden alles im Internet zeigen, wie erstellen Sie...