Materialize datepicker 未在模态内打开
[英]Materialize datepicker is not opening inside a modal
问题描述
In my webpage I have a button to trigger a modal.
在我的网页中，我有一个按钮来触发模式。 Inside that modal there is a input field for date.在该模态中有一个日期输入字段。 If I click the datepicker it is supposed to be opened.如果我单击日期选择器，它应该被打开。
However, the code is not working if the input date field is inside a modal.但是，如果输入日期字段位于模式内，则代码不起作用。 For testing purpose I brought it outside and then it is working perfectly.出于测试目的，我把它带到外面，然后它就可以正常工作了。
My code is below,我的代码如下，
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="container">
<button class="btn modal-trigger" href="#testModal">Open Modal</button>
<div id="testModal" class="modal modal-fixed-footer">
<input type="text" name="testDate1" class="datepicker">
</div>
<input type="text" name="testDate2" class="datepicker">
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.datepicker');
var instances = M.Datepicker.init(elems,{});
});
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
</script>
</html>
There are two input field.有两个输入字段。 One is named 'testDate1' which is inside the modal.一个名为“testDate1”，位于模态内。 Another one is named 'testDate2' which is outside.另一个名为“testDate2”的在外面。 The outside one is working.外面的正在工作。 Not the inside one.不是里面的。
How can I use datetime modal inside another modal?如何在另一个模态中使用日期时间模态？
3 个解决方案
解决方案1
3 已采纳 2019-05-08 05:19:12
Your datepicker inside modal is getting loaded, but do not have height .您在模态中的datepicker正在加载，但没有height 。 Set the height to 100% .将高度设置为100% 。
document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('.datepicker'); var instances = M.Datepicker.init(elems,{}); var elems = document.querySelectorAll('.modal'); var instances = M.Modal.init(elems); });
#testModal .modal { height: 100%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/> <div class="container"> <button class="btn modal-trigger" href="#testModal">Open Modal</button> <div id="testModal" class="modal modal-fixed-footer"> <input type="text" name="testDate1" class="datepicker"> </div> <input type="text" name="testDate2" class="datepicker"> </div>
解决方案2
1 2021-04-22 14:46:48
Add添加
container: "body"
to the options, when initializing the materialize modal and it will open inside the body, not inside the modal!选项，当初始化实体化模态时，它将在主体内打开，而不是在模态内打开！
解决方案3
0 2021-10-11 11:51:01
Jquery add line ' container: "body" ' Jquery 添加行'容器：“正文”'
$(document).ready(function(){
$('.timepicker').timepicker({
container: "body", // carregar dentro do MODAL ------------------------
default: 'now', //hora atual
fromnow: 0, // padrão para o milesegundos
twelvehour: false, // AM/PM = false | 24h = true
format: "HH:ii:SS",
donetext: 'ok', // btn OK
cleartext: 'limpar', // bnt clear
canceltext: 'cancelar', // btn cancel
autoclose: false, // fechar automatico
ampmclickable: true, // AM PM clicavel
vibrate: true
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.