物化日期选择器未在模式内打开答案

【问题标题】：Materialize datepicker is not opening inside a modal物化日期选择器未在模式内打开
【发布时间】：2019-05-08 05:09:06
【问题描述】：

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

但是，如果输入日期字段位于模态框内，则代码不起作用。出于测试目的，我把它带到外面，然后它工作得很好。

我的代码如下，

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

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

【问题讨论】：

标签： javascript css datepicker materialize

【解决方案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>

【讨论】：

【解决方案2】：

添加

container: "body"

到选项，初始化物化模态时，它将在主体内部打开，而不是在模态内部！

【讨论】：

【解决方案3】：

jquery添加行'容器：“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
    });
});

【讨论】：