6

Ich habe schon einige Lösungen für dieses Problem versucht, aber ich kann es nicht zum Laufen bringen. Ich versuche, ein Datepicker in mein Formular zu bekommen. Das Formular wird in einem Bootstrap-Modal platziert und das Ganze wird über Ajax geladen. Alles funktioniert gut außer dem Datums-Picker, der überhaupt nicht angezeigt wird, wenn er im Modal platziert wird.jQuery Datepicker in Twitter Bootstrap 3 Modal

Ich hatte gehofft, dass eine einfache Lösung wie: .datepicker {Z-Index: 9999! Wichtig;} würde funktionieren, aber es nicht. Kennt jemand eine einfache Lösung dafür?

Hier ist meine Datepicker: ist

<form action="" method="post"> 
    <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">Endre artikkel</h4> 
      </div> 
      <div class="modal-body">     
       <label for="arrived">Motatt</label> 
       <input type="text" name="arrived" class="form-control datepicker" id="arrived">          
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="submit" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</form> 

Das Formular in diesem div geladen:

<div class="modal fade" id="load_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 1040;"></div> 

Mit diesem javascript:

$(function() { 
    $(".datepicker").datepicker({ dateFormat: "yyyy-mm-dd" }); 
}); 

Hier ist meine Form ist

function edit_article(id){ 
    $("#load_modal").load("load_modal.cgi?type=edit&id="+id); 
} 

Antwort

3

Der Modal beheben wahrscheinlich, nachdem Sie die .datepicker() sollten Sie nach dem Laden der Form, dass Code auswerten hinzufügen geladen wird.

function edit_article(id){ 
    $("#load_modal").load("load_modal.cgi?type=edit&id="+id); 
    $("#load_modal .datepicker").datepicker({ dateFormat: "yyyy-mm-dd" }); 
} 
+0

ausführen Sie haben Recht! Danke vielmals! – Twistar

2

Wenn Sie diesen Code auf dem Dokument bereit nennen()

$(function() { 
    $(".datepicker").datepicker({ dateFormat: "yyyy-mm-dd" }); 
    }); 

Es gibt keine Form mit picker, damit es nicht

nennt dies einmal mehr nach dem Laden Formular initialisiert wird.

diese shoudl Ihr Problem

1
$(function() { 
    $("#arrived").datepicker({ dateFormat: "yyyy-mm-dd" }); 
}); 

Ich denke, dass Sie diesen Fehler machen ....

freundlich unter diesem Link sehen http://jsfiddle.net/TB8Yt/

0

Es klingt wie ich genau das gleiche Problem habe. Ich habe einen Datepicker in meinem Modal, und der Datepicker funktioniert gut, wenn mein Bildschirm zum ersten Mal geöffnet wird, aber beim zweiten Mal passiert nichts, wenn Sie auf das Datumsfeld klicken und bei jedem weiteren Öffnen des Modales funktioniert die Datumsauswahl nicht mehr. Ich habe diesen Code nicht zu sehr untersucht, aber es scheint, dass der Code des Datumsauswahlprogramms aufpassen muss, wenn er das Datepicker-Objekt aktiviert hat und dann nicht mehr ausgeführt wird.

Um dies laufe ich dieses Problem lösen, wenn ich meine modalen öffnen:

$("#modal").on('hidden.bs.modal', function() { 
    $('#ui-datepicker-div').remove(); 
}); 

jetzt Meine Datumsauswahl funktioniert gut. Dieser ui-datepicker-div ist derjenige, den datepicker automatisch erstellt, wenn Sie $(".datepicker").datepicker();

Verwandte Themen