1

I am trying to generate datepicker for jquery generated html input as below :

<input type="text" class="cal" />
<a href="#" id="datepicker">Show </a>
<div id="newdp"></div>

And the JS

var datePickerOptions = {
    dateFormat: 'yy-mm-dd',
    firstDay: 1,
    changeMonth: true,
    changeYear: true,
}
$(document).ready(function () {
    $(".cal").datepicker(datePickerOptions);
 });
$('#datepicker').click(function(){
   var html = '';
    html += '<input type="text" class="cal" />';
    $('#newdp').html(html);
});

I use the js codes as explained in jquery datepicker not working on dynamically created html. But in my case its not working !

JSFiddle

Community
  • 1
  • 1
Nitish
  • 2,695
  • 9
  • 53
  • 88

1 Answers1

2

You need to attach the datepicker to the newly created html element

$('#datepicker').click(function(){
   html += '<input type="text" class="cal" />';
   $('#newdp').html(html);
   html.datepicker(); // apply the date picker