Question

在我的网页中，我有一个按钮来触发模式。在该模式内部，有一个日期输入字段。如果我单击日期选择器，则应该将其打开。

但是，如果输入日期字段位于模式内，则代码将无法正常工作。为了进行测试，我将其带到外面，然后运行良好。

我的代码在下面

<!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”，位于外部。外面的一个正在工作。不是里面的。

如何在另一个模式中使用日期时间模式？

Answer 1

您的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>

Answer 2

添加

container: "body"

在选项中，当初始化materialize modal时，它会在body内部打开，而不是在modal内部！

实现日期选择器未在模式内部打开

2 个答案: