With jquery, i append some html form inputs to my site on a button click, like these:
html += '<div class="form-group my-4">';
html += '<span class="left">Date of ending work <span class="carer_help">Required format: 01-01-2000</span></span>';
html += '<span class="left"><input class="form-control datepicker" type="text" required="required" name="work_end[' + works_row_melleklet + ']" value="'+work_end+'" /></span>';
html += '</div>';
You can see, that the input have the datepicker class. But my problem is, that the datepicker calendar isnt showing up. I think, because the html input, where i wanna use the calendar, is not in the site's source, its just added by javascript on button click.
How can i fix this?
$('.datepicker').datepicker({
format: 'dd-mm-yyyy',
language: 'en',
autoclose: true,
todayHighlight: true
});
When you add dynamic inputs to the DOM, you need to re-initialise with the datepicker method again.
$('body').on('focus',".your_parent_div_name_where_datepicker_is_added", function(){
$(this).removeClass('hasDatepicker').datepicker();
});