在我的网页中，我有一个按钮来触发模态。在该模态中，有一个日期输入字段。如果我单击日期选择器，它应该被打开。
但是，如果输入日期字段位于模态内，则代码不起作用。出于测试目的，我把它带到外面，然后它工作得很好。
我的代码如下，
<!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>
有两个输入字段。一个被命名为"testDate1"，它位于模态内部。另一个被命名为"testDate2"，它在外面。外面的那个正在工作。不是里面的。
如何在另一个模态中使用日期时间模态？
您的模态datepicker正在加载，但没有height。将高度设置为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>添加
container: "body"
到选项，当初始化具体化模态时，它将在主体内部打开，而不是在模态内部打开！
Jquery add line ' container： "body" '
$(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
});
});