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. Another one is named 'testDate2' which is outside. The outside one is working. Not the inside one.

How can I use datetime modal inside another modal?

Solution

Your datepicker inside modal is getting loaded, but do not have height. Set the height to 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>