Level 1
initialize datepicker again when ur adding new input.... like after u append addRow.
Jul 14, 2020
10
Level 9
JQuery Date Picker not working in Dynamic Input Form
I have a code in Laravel-5.8 using JQuery Datepicker. The application is Dynamic input form that when you click add(+) button, it adds array of controls.
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Start Date<span style="color:red;">*</span></th>
<th scope="col">End Date<span style="color:red;">*</span></th>
<th scope="col" width="8%"><a class="btn btn-info addRow"><i class="fa fa-plus"></i></a></th>
</tr>
</thead>
<tbody>
<td>
<input id="startDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="start_date[]" class="form-control">
</td>
<td>
<input id="endDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="end_date[]" class="form-control">
</td>
</tbody>
</thead>
</table>
<script src="{{ asset('theme/adminlte3/plugins/jquery/jquery.js') }}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{{ asset('theme/adminlte3/plugins/jquery-ui/jquery-ui.js') }}"></script>
<script type="text/javascript">
$(function () {
$( "#startDate" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
});
$( "#endDate" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.addRow').on('click', function () {
var isHod = {{ Auth::user()->is_hod == 0 ? 0 : 1 }};
var numRows = $('.activity').length
if (numRows<4) {
addRow();
}
});
function addRow() {
var addRow = '<tr>\n' +
' <td><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input id="startDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="start_date[]" class="form-control"></div></td>\n' +
' <td><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input id="endDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="end_date[]" class="form-control"></div></td>\n' +
' <td><a class="btn btn-danger remove"> <i class="fa fa-times"></i></a></td>\n' +
' </tr>';
$('tbody').append(addRow);
addRemoveListener();
};
addRemoveListener();
});
function addRemoveListener() {
$('.remove').on('click', function () {
var l =$('tbody tr').length;
if(l==1){
alert('you cant delete last one')
}else{
$(this).parent().parent().remove();
}
});
}
</script>
The default JQuery datepicker works fine. But when I clicked on the Add new (+) to add new ones on array. When I click on the start_date and end_date, no date was coming.
How do I resolve this?
Thanks
Level 9
@tallaljamshed - Please how do I do that. Can you explain from the code
Level 75
@noblemfd I think it was pretty clear what @tallaljamshed said.
$('.addRow').on('click', function () {
var isHod = {{ Auth::user()->is_hod == 0 ? 0 : 1 }};
var numRows = $('.activity').length
if (numRows<4) {
addRow();
$('#startDate').datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
});
$('#endDate').datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
});
}
});
Level 1
u already made a function just name it...
<script type="text/javascript">
function initializeDatePicker {
$( "#startDate" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
});
$( "#endDate" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
});
});
</script>
after u append call that function again...
$('tbody').append(addRow);
initializedatepicker();
addRemoveListener();
see if it works
Level 9
@michaloravec - I added it this way:
<script type="text/javascript">
$(document).ready(function(){
$('.addRow').on('click', function () {
var isHod = {{ Auth::user()->is_hod == 0 ? 0 : 1 }};
var numRows = $('.activity').length
if (numRows<4) {
addRow();
$('#startDate').datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
});
$('#endDate').datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showAnim: 'slideDown',
duration: 'fast',
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
});
}
});
function addRow() {
var addRow = '<tr>\n' +
' <td><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input id="startDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="start_date[]" class="form-control"></div></td>\n' +
' <td><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input id="endDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="end_date[]" class="form-control"></div></td>\n' +
' <td><a class="btn btn-danger remove"> <i class="fa fa-times"></i></a></td>\n' +
' </tr>';
$('tbody').append(addRow);
addRemoveListener();
};
addRemoveListener();
});
But still not responding when I clicked on the datepicker for the added ones
Level 1
after u append :( ... and also don't repeat the code.
Level 75
@noblemfd Problem is that you use id change selector to class
<input class="startDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="start_date[]" class="form-control">
$('.startDate').datepicker({
//
});
And same for endDate
Because id attribute with same value can be only one at same time on the page. And it everytime select only first id and there apply datetimepicker.
Level 1
yup id too didnt see that. @noblemfd
Level 9
Thanks everyone @tallaljamshed and @michaloravec
Please or to participate in this conversation.