JQuery Date Picker not working in Dynamic Input Form I have a code in Laravel 8 using JQuery Datepicker. The application is Dynamic input form that when you click add(+) button, it adds array of controls.
<div class="row">
<div class="col-9">
@include('admin.layouts.notify')
@include('admin.layouts.message')
<table class="table table-bordered" id="dynamicTable">
<tr>
<th>@lang('messages.discount')</th>
<th>@lang('messages.start_date')</th>
<th>@lang('messages.end_date')</th>
<th>@lang('messages.type')</th>
<th>@lang('messages.action')</th>
</tr>
<tr>
<td><input name="discount[0][amount]" placeholder="Amount" class="form-control"/></td>
<td>
<div class="input-group">
<input class="datepicker" name="discount[0][start]"
type="text" aria-required="true">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</td>
<td>
<div class="input-group">
<input class="datepicker" id="datetimepicker" name="discount[0][end]"
type="text" aria-required="true">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</td>
<td>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="1" name="discount[0][type]"
checked>@lang('messages.positive')
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="0"
name="discount[0][type]">@lang('messages.negative')
</label>
</div>
</td>
<td>
<button type="button" name="add" id="add" class="btn btn-success">@lang('menu.add')</button>
</td>
</tr>
</table>
</div>
</div>
</div>
@section('scripts')
<script type="text/javascript">
let i = 0;
$("#add").click(function () {
++i;
$("#dynamicTable").append('<tr><td><input name="discount[' + i + '][amount]" placeholder="Amount" class="form-control" required /></td>\n<td><input class="datepicker" name="discount[' + i + '][start]"type="text"></td><td><input class=" datepicker" name="discount[' + i + '][end]"type="text"></td><td><div class="form-check-inline">\n' +
' <label class="form-check-label">\n' +
' <input type="radio" class="form-check-input" value="1" name="discount[' + i + '][type]" checked>@lang('messages.positive')\n' +
' </label>\n' +
' </div>\n' +
' <div class="form-check-inline">\n' +
' <label class="form-check-label">\n' +
' <input type="radio" class="form-check-input" value="0" name="discount[' + i + '][type]">@lang('messages.negative')\n' +
' </label>\n' +
' </div></td><td><button type="button" class="btn btn-danger remove-tr">@lang('partials.delete')</button></td></tr>');
});
$(document).on('click', '.remove-tr', function () {
$(this).parents('tr').remove();
});
</script>
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker({
clearBtn: true,
format: "dd/mm/yyyy",
startDate: new Date()
});
});
</script>
@endsection
The default JQuery datepicker works fine. But when I clicked on the Add new (+) to add new ones on the array. When I click on the discount[' + i + '][start] and discount[' + i + '][end], no date was coming no date to pick
How do I resolve this?
Thanks
That’s the expected behavior, as the dynamic input isn’t loaded when the initialization function is called. Therefore to reinitialize the newly added datepicker field, or find a way to delegate the action.
Therefore either add the initialization after the append (within the same #add click event handler).
Or add a listener like the following:
$(‘body’).on(‘focus’, ‘.datepicker’, function(){
$(this).datepicker(...)
}
This would ensure that whenever you take an action new field would be initialized.
can you type the proper js code I dont understend
$(body).on(‘focus’, ‘.datepicker’, function(){
$(this).datepicker(...)
}
Im nub in js
yes sure:
$('body').on('focus', '.datepicker', function(){
$(this).datepicker({
clearBtn: true,
format: "dd/mm/yyyy",
startDate: new Date()
})
}
that was just your initialisation that you had on your code.
I replace the
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker({
clearBtn: true,
format: "dd/mm/yyyy",
startDate: new Date()
});
});
</script>
with
$('body').on('focus', '.datepicker', function(){
$(this).datepicker({
clearBtn: true,
format: "dd/mm/yyyy",
startDate: new Date()
})
}
not working still only first input is calendar
Try changing class name:
<input class="mydate" name="discount[0][start]"
then
$(document).ready(function () {
$(".mydate").datepicker({ ......
etc
My solution
<script type="text/javascript">
let i = 0;
function add_more() {
let pozitiv = '@lang('messages.positive')';
let negativ = '@lang('messages.negative')';
++i;
const html = '<tr><td><input name="discount[' + i + '][amount]" placeholder="Amount" class="form-control" required/><td><div class="input-group"><input class="form-control datepicker" name="discount[' + i + '][start]"type="text" aria-required="true"><div class="input-group-addon"><span class="glyphicon glyphicon-th"></span></div></div></td><td><div class="input-group"><input class="form-control datepicker" name="discount[' + i + '][end]"type="text" aria-required="true"><div class="input-group-addon"><span class="glyphicon glyphicon-th"></span></div></div></td><td><div class="form-check-inline"><label class="form-check-label"><input type="radio" class="form-check-input" value="1" name="discount[' + i + '][type]" checked="">' + pozitiv + '</label></div><div class="form-check-inline"><label class="form-check-label"> <input type="radio" class="form-check-input" value="0" name="discount[' + i + '][type]">' + negativ + '</label></div></td></td><td><button type="button" class="btn btn-danger remove-tr">Delete</button></td></tr>';
$('#dynamicTable').append(html);
$('.datepicker').datepicker({
clearBtn: true,
format: "dd/mm/yyyy",
startDate: new Date()
});
}
$(document).on('click', '.remove-tr', function () {
$(this).parents('tr').remove();
});
</script>
Please sign in or create an account to participate in this conversation.
