Question

同一表单上的多个日期选择器看看我的小提琴。

我根据需要添加了额外的行，我可以让日期选择器处理第一个输入。但是，我尝试使用count i添加额外的输入并附加实例名称无效。

任何想法或建议都将不胜感激。

Answer 1

简单修复，只需移动

$("#datepicker" + i).datepicker();

进入

 $('#add').click(function() {
   ....
 }

块，就在i ++之上;接下来是摆脱你的if / else阻止并让它运行

 $("#datepicker").datepicker();

on document.ready。

Answer 2

您只需在点击功能

中添加$("#datepicker" + i).datepicker();即可

DEMO

Answer 3

只需在字段上使用类而不是id：

<input type="text" name="date[]" class="field" class="datepicker" value=""/>

然后像这样更改你的添加功能：

$('#add').click(function() {
    $('... html tags ...').appendTo('.inputs').fadeIn('slow', function() {
       $(".datepicker").datepicker();
    });
    i++;
});

Answer 4

固定。 http://jsfiddle.net/83xzT/8/

    var i = 1;
$( "#datepicker" ).datepicker();

$('#add').click(function() {
    $('<div><span class="fieldset"><input type="text" name="date[]" class="field" id="datepicker' + i + '" value=""/> <select class="field" name="time[]"><option value="NULL">---Select Time ---</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> <select class="field" name="timeframe[]"><option value="NULL">---Select A.M/P.M. ---</option><option value="am">A.M.</option><option value="pm">P.M.</option></select><input type="hidden" name="breaker[]" class="field" value=";"/></span></div>').fadeIn('slow').appendTo('.inputs');
        if(i >= 1) {
            $( "#datepicker" + i ).datepicker();
        }
    i++;
});

同一表格上的多个日期选择器

4 个答案: