Ich habe ein sehr seltsames Problem mit einer Seite, die ich mache mit Bootrap3, Jquery und Bootstrap-Datepicker.Bootstrap-Datepicker in Modal mit bootstrap löscht versteckte Dateien hinter wenn
Ich habe ein dynamisches Modal (mit einem Formular darin), wo der Benutzer ein Datum auswählen kann. Da das Modal dynamisch ist, sende ich einige Werte von der Schaltfläche zu einigen versteckten Werten innerhalb des Modals. (Nicht, dass es wichtig ist, ob sie innerhalb oder außerhalb des Modales sind ...)
Das Problem ist, wenn der Benutzer auf den Datepicker klickt, werden alle eingegebenen Text/versteckten Werte gelöscht und werden undefiniert.
Ich habe hier ein Beispiel ein: https://codepen.io/anon/pen/VjWzVr
Der Code ist:
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
$('#datetimepicker1').datetimepicker({
defaultViewDate: 'today',
autoclose:true,
todayHighlight:true
});
$('#datetimepicker1').datetimepicker('update', new Date());
$('#datetimepicker1').datetimepicker('update');
var showInField = button.data('showid') // Extract info from data-* attributes
$('#test').val(showInField)
})
Und die HTML:
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-showid="1">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<div id="datetimepicker1" class="input-append date">
<input data-format="yyyy-mm-dd" type="text"></input>
<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div><br>
<input type="text" name="test" id="test" value="">
Verwendung:
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
https://s3-us-west-2.amazonaws.com/s.cdpn.io/2708/bootstrap-datetimepicker.min.js
Die Grund warum ich t mache er 'update' ist so, dass der datepicker das heutige Datum in das Feld geschrieben hat ... codepen zeigt es nicht an ... aber es funktioniert.
Wer weiß, warum es jedes Eingabefeld auf der Seite löscht?
Dank
Dies liegt an Ihrem Datumsformat. Sie müssen es auch im JS für den DatePicker definieren .... –
versuchen, dies auch: Format: 'JJJJ-MM-TT' –
ja Entschuldigung ich vergaß ich entfernte das, wenn ich Dinge getestet und dann vergessen habe, es hinzuzufügen zurück. Es tut aber immer noch den Bug damit. – user1033882