Unable to click on Date picker when using inner html-CodePudding

By using below code unable to select the data picker while using the inner HTML.

What I am doing wrong can any one help me with this ? Thanks in advance.

Here is my Code

$(document).ready(function(){
 /*Date Picker Initiation*/
 $('.datepicker').datepicker();
 $(".datepicker").datepicker({
 format: 'dd/mm/yyyy',
 todayHighlight: true,
 }).on('change', function (ev) {
 $(this).datepicker('hide');
  });});

CodePudding user response：

I think datepicker Initiate before html load so it can not find the markup. You have to need initial datepicker after html render looks like this:

setTimeout(() => {
  document.getElementById('p').innerHTML = '<input type="text" id="datepicker">'; // load html and then call datepicker 

  $( "#datepicker" ).datepicker();
}, 1000)