Datepicker 不在模态内工作
[英]Datepicker not working inside the modal
问题描述
我在模态中有一个表单。
我正在尝试将一个输入字段更新为日期选择器，但日历未显示。
这是我的 html 头像：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"> </script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="http://www.useragentman.com/tests/html5Forms/shared/js/modernizr.com/Modernizr-2.5.3.forms.js"></script>
<script>$('#idTourDateDetails').datepicker(); </script>
<style>
body { margin: 0;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; }
.datepicker {
z-index: 1600 !important; /* has to be larger than 1050 */
}
</style>
我的 html 身体：-
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<form role="form" name="passdata" action="save.php" method="POST">
<div class="col-xs-6"><label>Joining Date</label>
<input type="text" name="idTourDateDetails" id="idTourDateDetails" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span>
<br/> </div>
</div>
<input type="submit" class="btn btn-info" value="Submit" style="margin-top:20px;margin-left:80%; margin-bottom:15px;">
<script type="text/javascript">
$(document).ready(function(){
$("#myModal3").modal({backdrop: "static"});
$("#myModal3").modal('show');
});
</script>
这就是我获得 html output 的方式：-
当我点击输入框时也没有任何反应。
不确定我做错了什么
5 个解决方案
解决方案1
0 已采纳 2017-08-09 17:44:13
输入类型是text ，将其替换为date ，它将运行良好
<input type="date" name="idTourDateDetails" id="idTourDateDetails" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span>
这里是JS Bin
解决方案2
0 2017-08-09 18:13:27
请确保模态框是正确的 html 结构。 我用正确的 html 结构用你的代码做了一个例子。 请检查一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"> </script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="http://www.useragentman.com/tests/html5Forms/shared/js/modernizr.com/Modernizr-2.5.3.forms.js"></script>
<title>JS Bin</title>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 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">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form>
<div class="col-xs-6"><label>Joining Date</label>
<input type="text" name="idTourDateDetails" id="idTourDateDetails" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span>
<br/>
</div>
</form>
</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>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#idTourDateDetails').datepicker();
$("#myModal3").modal({backdrop: "static"});
$("#myModal3").modal('show');
});
</script>
</body>
</html>
解决方案3
0 2019-07-13 06:40:50
以上所有评论都没有回答真正的问题。 Datepicker.js 或 css 插件在模态上不起作用。 以正常形式例如
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
<input type="text" class="form-control datepicker" data-date-end-date="0d" required="">
</div>
该代码以一般形式工作。 当您将相同的代码传输到模态时，它不起作用。 （如果您的模态包含接受日期输入的表单字段）在输入字段中使用 ''type="date"' 只会触发默认浏览器日历弹出而不是日期选择器插件日历弹出。（Firefox 和 Edge 浏览器）。 简而言之，datepicker 插件不支持模式上的日历弹出窗口，因此只需使用默认日期类型：
<input type="date" class="form-control" required="">
解决方案4
0 2020-06-29 10:01:16
.ui-datepicker
{
z-index: 1600 !important; /* has to be larger than 1050 */
}
解决方案5
0 2021-10-04 13:21:42
我有一个类似的问题，日期选择器显示在视口下方。 如果带有日期选择器日历的输入是模态的，则 jquery ui 元素<div id="ui-datepicker-div"></div>的顶部 position（添加到<body/>中）将不正确计算。
Chrome ( top="285px" ):
IE11 ( top="2853.13px" ):
如您所见，顶部 position 在 IE11 中明显更高，这是因为它包括 window 滚动条 position。
要解决这个问题，您可以执行以下操作：
- 仅检查 IE11 浏览器 -注意！ 一般不建议这样做
- 找到日历应该出现在下方的输入的 position（elementTopPosition）
- 从 window 滚动 position 中减去“elementTopPosition”并添加“elementTopPosition”的高度
- 将新的top position设置为
datePickerIEPosition
// IE11 fix
var isIE11 = !!navigator.userAgent.match(/Trident.*rv\:11\./);
if(isIE11) {
$('.modal-body input.date-field').on('click', function() {
var datePickerIEPosition = $(this).offset().top - $(window).scrollTop() + $(this).outerHeight();
var $datepickerDiv = $('#ui-datepicker-div');
if($(this).is(":focus")) {
$datepickerDiv.css({ top: datePickerIEPosition + 'px' });
}
});
}
select2和datepicker无法在codeigniter上的ajax加载模式窗口内工作
[英]select2 and datepicker not working inside ajax loaded modal window on codeigniter
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.