How to bind datepicker to new dynamic fields?

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.

score 1 · Accepted Answer · answered Oct 26 '12 at 08:25

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;
    });
});

answered Oct 26 '12 at 08:25

Elliott

2,669
2
23
33

I need to test this out, but yeah something like that only that I have an on change event for #number to create so when you type 3 you see 3 inputs without pressing anything. I'll let you know. – George D. Oct 26 '12 at 08:36
1

Your snippet made me think about it, read a few things and finally manage to fix that. Thank you very much :-) – George D. Oct 26 '12 at 09:54

score 0 · Answer 2 · edited Mar 20 '14 at 10:25

function getPhase()
{

$(document).click(function(){
    $(".date").datepicker({
                    dateFormat: "dd/mm/yy",
                    showOn: "button",
                    buttonImage: "images/calendar.gif",
                    buttonImageOnly: true,
                    //minDate: '-16d -1m', 
                    //maxDate: '-6d -1m',
                    onSelect: function(dateText, inst) {
                        $(this).focus();
                    }
        });
});
    /*i++;


    if(i>30)
    {
        alert("Maximum Allows 30 Entries! Please Press Save Button");
        return false;
    }*/
    var in_tbl_name="dataTable";


    var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
    // create row
    var row = document.createElement("tr");

    // create table cell 1
    var td1 = document.createElement("td")
    var strHtml1="<input name='chk"+count+"'  id='chk"+count+"'  type='checkbox' value='"+count+"' class='csc_input' >";
    td1.innerHTML = strHtml1.replace(/!count!/g,count);

    // create table cell 2
    var td2 = document.createElement("td")
    var strHtml2="<input name='sno"+count+"' id='sno"+count+"' style='width:20px;'  type='text' value='"+count+"' class='csc_input' >";
    td2.innerHTML = strHtml2.replace(/!count!/g,count);

    // create table cell 3
    var td3 = document.createElement("td")
    var strHtml3="<strong>Phase Demand</strong>";
    td3.innerHTML = strHtml3.replace(/!count!/g,count);

    // create table cell 4
    var td4= document.createElement("td")
    var strHtml4 = "<input type='text'  size='13'  name='kva"+count+"'  id='kva"+count+"'  class='csc_input'  ><B>KVA";
    td4.innerHTML = strHtml4.replace(/!count!/g,count);

    // create table cell 5
    var td5 = document.createElement("td")
    var strHtml5 = "<strong>From Date </strong>";
    td5.innerHTML = strHtml5.replace(/!count!/g,count);

    // create table cell 6
    var td6 = document.createElement("td")
    var strHtml6 = "<input type='text'  name='fyear"+count+"'  id='fyear"+count+"'  size='13' class='date'>";
     td6.innerHTML = strHtml6.replace(/!count!/g,count);

    // create table cell 7
    var td7 = document.createElement("td")
    var strHtml7 = "<strong>End Date</strong>";
    td7.innerHTML = strHtml7.replace(/!count!/g,count);

    // create table cell 8
    var td8 = document.createElement("td")
    var strHtml8= "<input type='text'  name='year"+count+"'  id='year"+count+"'  size='13' class='date' >";
    td8.innerHTML = strHtml8.replace(/!count!/g,count);

    // append data to row
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);
    row.appendChild(td5);
    row.appendChild(td6);
    row.appendChild(td7);
    row.appendChild(td8);

    // add to count variable
    // append row to table
     count = parseInt(count) + 1;
    document.f1.count.value=parseInt(document.f1.count.value)+1;
    //alert("count"+count);
    // append row to table
    tbody.appendChild(row);
    getSno();
    }

where ever the date field is there declare in class with some name like example class='date'..As you see above on click function call that class when ever a new row is created — sindhu, Mar 20 '14 at 10:11

How to bind datepicker to new dynamic fields?

2 Answers2