[英]Bootstrap show datepicker on modal
I am trying to use datepicker that show on modal. 我正在尝试使用在模式上显示的datepicker。 But my code isn't work. 但是我的代码不起作用。 I already use .datepicker{z-index:1151;} and it's not working too, can someone help me to show datepicker on bootstrap modal ? 我已经使用.datepicker {z-index:1151;}了 ,但它也无法正常工作,有人可以帮我在启动模态上显示datepicker吗? Thanks 谢谢
And this is my code, 这是我的代码,
Button (in edit.php) : 按钮(在edit.php中):
<a href="#detail" id="custId" data-toggle="modal" data-id="'.$row["id"].'" class="btn btn-success btn-sm" role="button" title="Detail"><i class="glyphicon glyphicon-eye-open"></i></a>
Modal (in index.php) : 模态(在index.php中):
<div class="modal fade" id="edit" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Costumer</h4>
</div>
<div class="modal-body">
<div class="fetched-data"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Keluar</button>
</div>
</div>
</div>
</div>
JS for modal (in index.php) : 模态的JS(在index.php中):
<script type="text/javascript">
$(document).ready(function(){
$('#edit').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
//menggunakan fungsi ajax untuk pengambilan data
$.ajax({
type : 'post',
url : 'edit.php',
data : 'rowid='+ rowid,
success : function(data){
$('.fetched-data').html(data);//menampilkan data ke dalam modal
}
});
});
});
</script>
JS for Datepicker (in index.php) : Datepicker的JS(在index.php中):
<script type='text/javascript'>
$(function(){
$('.input-group.date').datepicker({
calendarWeeks: true,
todayHighlight: true,
autoclose: true
});
});
</script>
Use datepicker
method on jQuery object that refers to existing input element. 在引用现有输入元素的jQuery对象上使用datepicker
方法。 See example below. 请参见下面的示例。
$(function() { $('.fetched-date input').datepicker({ calendarWeeks: true, todayHighlight: true, autoclose: true }); });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/css/bootstrap-datepicker.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/js/bootstrap-datepicker.min.js"></script> <!-- body --> <div class="modal fade" id="edit" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Edit Costumer</h4> </div> <div class="modal-body"> <div class="input-group fetched-date"> <input type="text" class="form-control" value="07/07/2017"> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Keluar</button> </div> </div> </div> </div> <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#edit" title="Detail"> <i class="glyphicon glyphicon-eye-open"></i> </button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.