动态创建行中每个输入元素的日期选择器？

Question

我有一个动态 for 循环，如下所示。它创建具有 4 列的行。我想为带有输入字段（）的列之一添加一个日期选择器。

 for (var i=0, file; file=o.files[i]; i++) { %}

        <tr class="template-upload fade">
            <td class="preview"><span class="fade"></span></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
    <td class="docDate"><span><input type="text" id="idDocDate" class="clsDocDate" /><img src="../Images/Calendar.png" alt="" onclick="txtDatePicker(this);"/></span></td>

    </tr>
    {% } %}

我在图像按钮上使用“onclick”事件尝试了下面的代码，但这不能按预期工作。它显示了每一行的日期选择器，但问题是它只将选定的日期值分配给第一行。我选择哪一行并不重要，它仍然只分配给第一行。是否有任何解决方法可以为每一行获取单独的日期选择器？

function txtDatePicker(argDate) {
    var ele = $(argDate).closest('td').find('.clsDocDate');
    $(ele).datepicker({
        showOn: 'button'
    });
}

Answer 1

看起来这是因为您在日期输入字段中有重复的 id，请从日期字段中删除 id 属性

<input type="text" class="clsDocDate" />

演示：Solution、Problem