如何将日期选择器绑定到新的动态字段？

Question

我花了一天多的时间寻找解决方案。我运行了 Jquery 1.8.1 和 Jquery UI 1.9.1。

用户在输入字段中输入一个数字并动态创建动态输入字段。这些输入字段需要附加 Jquery UI 日期选择器。这就是问题所在。

我写了这段代码，但它不起作用

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

控制台“点击”正常，所以我确信 DOM 正在获取在此 dateinput() 函数中运行的所有内容。我也碰到了这个stackoverflow question，这是同样的问题，但它有点过时了。我尝试了该主题的所有内容，但没有看到任何结果。

Answer 1

这就是你所追求的吗？

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

Answer 2

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