DatePicker function is not working

Question

I have two datepicker function check here

var divContent = '<input type="text" placeholder="Enter date" class="dupInput hasDatepicker" id="gl_img_datepicker" readonly="">';

jQuery("#gl_img_datepicker").datepicker();
jQuery("#gl_img_datepicker2").datepicker();

    jQuery('body').on('click', '#gl_img_datepicker_init', function(e) {
        jQuery("#gl_img_datepicker").datepicker('show');
    });

but it does not seems to show the calender. I checked this jsfiddle and also read api but I am not able to find the problem.

I am seeing this error in console

"Uncaught TypeError: Cannot read property 'settings' of undefined "

please help, Thanks

Answer 1

Seems like the problem is with the class name 'hasDatepicker'. If you remove that class name it will work fine.

'hasDatepicker' class name is used internally in the datepicker plugin. So better to avoid that name in your code.

<div id="my div ">
    <input type="text" placeholder="Enter date" class="dupInput" id="gl_img_datepicker" />
    <button id="gl_img_datepicker_init">Date</button>
</div>

<div id="my_new_div ">
    <input type="text" placeholder="Enter date" class="dupInput" id="gl_img_datepicker2" />
    <button id="gl_img_datepicker_init2">Date</button>
</div>

Fiddle