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=".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=".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?
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./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./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?
Share Improve this question edited May 8, 2019 at 5:15 Nabil Farhan asked May 8, 2019 at 5:09 Nabil FarhanNabil Farhan 1,5364 gold badges27 silver badges45 bronze badges3 Answers
Reset to default 3Your 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./ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare./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>Add
container: "body"
to the options, when initializing the materialize modal and it will open inside the body, not inside the modal!
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
});
});