I have the following script that works fine:
<head>
<title>DateTimepicker</title>
<!-- Include Bootstrap CDN -->
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<!-- Include Moment.js CDN -->
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js">
</script>
<!-- Include Bootstrap DateTimePicker CDN -->
<link
href=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"
rel="stylesheet">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js">
</script>
</head>
<div class="container">
<div class="row mb-4">
<div class="col text-center">
<h3>Bootstrap 4 and Tempus Dominus in a modal</h3>
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modal">Click to open Modal</a>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label>Date and time</label>
<input type="text" class="form-control datetimepicker-input" id="datetimepicker1" data-toggle="datetimepicker" data-target="#datetimepicker1" />
</div>
<script>
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm'
});
});
</script>
Then i use it to create form on dynamic action modal, it’s fail.
Here my code to get action modal
<script type="text/javascript">
$(document).ready(function(){
$('#btn').click(function(){
$('#menu-load').html('C:/xampp/htdocs/menu.html');
});
});
</script>
My menu.html
<div class="card card-style">
<div class="content mb-2">
<div class="input-style has-icon input-style-1 input-required">
<i class="input-icon fas fa-calendar-times"></i>
<span>Start</span>
<em>(required)</em>
<input type="text" class="form-control datetimepicker-input" id="datetimepicker1" data-toggle="datetimepicker" data-target="#datetimepicker1" />
</div>
<button type="button" class="submitform btn btn-lg btn-block btn-full btn-m shadow-l rounded-s text-uppercase font-900 bg-green1-dark" data-id = "add">Save</button>
</div>
</div>
Action modal generate from server by load another html.
This is my datepicker on my action modal (https://i.sstatic.net/CU4KvWSr.png)
Look like dropdown datepicker generate, but not show anything…
i try to change code to
<script>
$("#menu-load").on("click","#datetimepicker1",function(t){
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm'
});
});
</script>
New contributor
FAJAR RAHMADI is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.