Datepicker материализации не открывается внутри модального - PullRequest
Новая
       9

Datepicker материализации не открывается внутри модального

1 голос
/ 08 мая 2019

На моей веб-странице есть кнопка для запуска модального режима. Внутри этого модального поля есть поле для ввода даты. Если я нажму на кнопку выбора даты, она должна быть открыта.

Однако код не работает, если поле ввода даты находится внутри модального поля. Для целей тестирования я вывел его на улицу, и тогда он работает отлично.

Мой код ниже, 

<!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, который находится снаружи. Внешний работает. Не внутри.

Как я могу использовать мод datetime в другом модале?

1 Ответ

2 голосов
/ 08 мая 2019

Ваш 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>
...