Question

I have spend over a day searching a solution about this. I ran the Jquery 1.8.1 and Jquery UI 1.9.1.

The user puts a number in an input field and creates on the fly, dynamic input fields. Those input fields need to have an attached Jquery UI datepicker. And thats the problem.

I write this code and it doesn’t work

function dateinput(){
    console.log('clicked');
    var dateinput = $('.hasDatepicker');
        dateinput.datepicker("option", "dateFormat", 'mm/dd/yy');
        dateinput.datepicker({
            showAnim : 'fold'
        });
    }

The console get the ‘clicked’ ok, so I am sure the DOM is getting everything that is run in this dateinput() function. I also bump in this stackoverflow question that is the same problem but its a bit out to date. I tried everything in this topic and I didn’t see any result.

Answer 1

Is this what you’re after?

JsFiddle Here

HTML

<input id="numberToCreate" maxlength="1" />
<input id="addInput" type="button" value="Add Input" />
<div id="inputs"></div>

jQuery

$(function(){
    $('#addInput').click(function() {
        var numberToCreate = $('#numberToCreate').val();
        for (var i = 1; i <= numberToCreate; i++)
        {
            $('<input />').datepicker().appendTo('#inputs');
        }
        return false;
    });
});