Im having trouble getting the datetimepicker to load fully in the following: it adds the elements to the page but clicking on the calendar icon does not function like the first set does. Im new to web page building be gentle
Here is the jsfiddle: https://jsfiddle.net/gq8a7k14/
The first 2 datetimepickers work fine, when you click the add button, a new set is added but they dont work.
<?php
?>
<html>
<head>
<title>SubmitYourTime</title>
<link href='assets/css/phppot-style.css' type='text/css' rel='stylesheet' />
<link rel='stylesheet' type='text/css'
href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css'>
<style type='text/css'>
.container {
margin-top: 40px;
}
.btn-primary {
width: 100%;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$( document ).ready(function() {
$('#datetimepicker0s').datetimepicker();
$('#datetimepicker0e').datetimepicker();
$('.add').on('click', add);
$('.remove').on('click', remove);
});
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
$("#datetimepicker" + new_chq_no + "s").datetimepicker();
$("#datetimepicker" + new_chq_no + "e").datetimepicker();
var new_input = "<div class='row'> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>Start Time</label> <div class='input-group date' name='dtp" + new_chq_no + "s' id='datetimepicker" + new_chq_no + "s'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'> </span> </span> </div> </div> </div> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>End Time</label> <div class='input-group date' name='dtp" + new_chq_no + "e' id='datetimepicker" + new_chq_no + "e'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'></span> </span> </div> </div> </div> </div>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
}
function remove() {
var last_chq_no = $('#total_chq').val();
if (last_chq_no > 1) {
$('#new_' + last_chq_no).remove();
$('#total_chq').val(last_chq_no - 1);
}
}
</script>
</head>
<body>
<div class='container'>
<div class='panel panel-primary'>
<div class='panel-heading'>Enter Your Time</div>
<div class='panel-body'>
<div id='new_chq'>
<div class='row'>
<div class='col-md-6'>
<div class='form-group'>
<label class='control-label'>Start Time</label>
<div class='input-group date' name='dtp0s' id='datetimepicker0s'>
<input type='text' class='form-control' />
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'></span>
</span>
</div>
</div>
</div>
<div class='col-md-6'>
<div class='form-group'>
<label class='control-label'>End Time</label>
<div class='input-group date' name='dtp0e' id='datetimepicker0e'>
<input type='text' class='form-control' />
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'></span>
</span>
</div>
</div>
</div>
</div>
</div>
<input type='hidden' value='1' id='total_chq'>
<button class='add'>Add Time</button>
<br></br>
<input type='submit' class='btn btn-primary' value='Submit'>
</div>
</div>
</body>
</html>
You need to initialize the datepicker() after it is appended to the page, currently when you attempt to initialize it the selector does not find anything.
original
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
$("#datetimepicker" + new_chq_no + "s").datetimepicker();
$("#datetimepicker" + new_chq_no + "e").datetimepicker();
var new_input = "<div class='row'> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>Start Time</label> <div class='input-group date' name='dtp" + new_chq_no + "s' id='datetimepicker" + new_chq_no + "s'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'> </span> </span> </div> </div> </div> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>End Time</label> <div class='input-group date' name='dtp" + new_chq_no + "e' id='datetimepicker" + new_chq_no + "e'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'></span> </span> </div> </div> </div> </div>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
}
modified
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
var new_input = "<div class='row'> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>Start Time</label> <div class='input-group date' name='dtp" + new_chq_no + "s' id='datetimepicker" + new_chq_no + "s'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'> </span> </span> </div> </div> </div> <div class='col-md-6'> <div class='form-group'> <label class='control-label'>End Time</label> <div class='input-group date' name='dtp" + new_chq_no + "e' id='datetimepicker" + new_chq_no + "e'> <input type='text' class='form-control' /> <span class='input-group-addon'> <span class='glyphicon glyphicon-calendar'></span> </span> </div> </div> </div> </div>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
$("#datetimepicker" + new_chq_no + "s").datetimepicker();
$("#datetimepicker" + new_chq_no + "e").datetimepicker();
}