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

InformationsquelleAutor Kim Ocampo Octaviano | 2015-09-25

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..
InformationsquelleAutor SjaakvBrabant

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?

InformationsquelleAutor Abhilash Thomas

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>

InformationsquelleAutor Abhilash Thomas

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

InformationsquelleAutor muchtarsp
0

Ändern Sie die id von dem input-tag zu datepicker, kann es funktionieren.

InformationsquelleAutor Ahmadreza Pourghodrat

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

InformationsquelleAutor Nurkartiko

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.