jQuery Datepicker不适用于除第一行之外的html表行

Question

我的.net MVC cshtml页面中有此html代码。 Datepicker类用于EventDate的输入类型。单击输入文本框时，Datepicker日历在每一行上都可以打开。问题是，只有第一行文本框填充了日历上的所选日期，其他行没有填充所选日期。

$(function () {
    $(".Datepicker").datepicker({
        changeMonth: true,
        changeYear: true, 
        showAnim: "slideDown"
    });
});

    @foreach (DataRow row in Model.Tables["dataa"].Rows)
                     {
                        <tr> 
                            <td>
                                <div class="editDelInput EventDateText">
                                    @row["EventDate"]  
                                </div>
                                <div class="saveCanInput EventDateInput" style="display:none">
                                    <input type="date" class="Datepicker form-control form-control-sm" id="NONUHCEventDate" name="NONUHCEventDate">
                                </div>
                            </td>
    </tr>
                     }

Answer 1

我假设您使用jQueryUI datepicker

如果输入具有相同的“ id”，则可能会发现，无论您与哪个日期选择器行一起使用，都使用相同的实例来查找具有该ID的输入，并且碰巧找到了第一个输入，因为该ID为整个页面都一样。

class =“”替代方法似乎很流行。

我用VueJS做过类似的事情，我在每行创建一个VueJS实例。

此答案可能会对您有所帮助。 stackoverflow - Apply jQuery datepicker to multiple instances

Answer 2

您可以尝试以下代码。

$(document).on('focus',".Datepicker").datepicker({
        changeMonth: true,
        changeYear: true, 
        showAnim: "slideDown"
    });