DatePicker 始终设置为第一行 ASP.NET MVC

Question

我的日期选择器始终设置为第一行。它会动态实现还是我的系统有问题？

  <tbody class="TrimGridContent" id="trimBody">
                        @foreach (TrimsAccessoriesOrderModel trimsData in TrimsData)
                        {
                            <tr class="TrimGridFields">
                                <td >
                                    <input type="checkbox" class="singleTrimGridCheck" value="@trimsData.GridTranId">
                                </td>
                                <td>@trimsData.SerialNumber</td>
                                <td>@trimsData.GridOrderDate</td>
                                <td>@trimsData.GridSyleNo</td>
                                <td>@trimsData.GridItemName</td>
                                <td>@trimsData.GridItemCode</td>
                                <td>@trimsData.GridStoreName</td>
                                <td>@trimsData.GridSupplierName</td>
                                <td>@trimsData.GridOrderQty</td>
                                <td>@trimsData.GridUnitName</td>
                                <td>@trimsData.GridUnitPrice</td>
                                <td>@trimsData.GridDeliveryDate</td>
                                <td>@trimsData.GridRemarks</td>
                                <td>
                                    @Html.TextBoxFor(m => m.SupplierDate, new {@class = "form-control datepicker", @placeholder = "Supplier Date", @id = "SupplierDate"})
                                </td>
                                <td>
                                    @Html.TextBoxFor(m => m.RevisedDate, new {@class = "form-control datepicker", @placeholder = "Revised Date", @id = "RevisedDate"})
                                </td>

                                <td>
                                    @Html.TextBoxFor(m => m.InHouseDate, new {@class = "form-control datepicker", @placeholder = "In House Date", @id = "InHouseDate"})
                                </td>
                            </tr>
                        }
                    </tbody>

如果我向除第一行日期选择器之外的第二行或第三行提供输入，则日期将设置为名为供应商日期的第一行。

这是我的 js。

@section Scripts {
 @Scripts.Render("~/bundles/jqueryval")
   <script>
       $('.datepicker').datepicker({
           changeMonth: true,
           changeYear: true,
           dateFormat: 'dd/mm/yy'
       });
     </script>
       }

有人遇到过这种问题吗？

Answer 1

听起来您的问题发生了，因为您将 @Html.TextBoxFor() 助手放入带有预定义 @id = "SupplierDate" 参数的 foreach 循环中，这会呈现所有具有相同 id 属性的相应文本框，而不是唯一的 ID 名称。因此，您应该尝试使用for 循环和TrimsData 集合索引，同时删除id 属性定义（让助手创建唯一的id 属性值）：

@for (int i = 0; i < TrimsData.Count; i++)
{
    <tr class="TrimGridFields">
        <td>
           <input type="checkbox" class="singleTrimGridCheck" value="@TrimsData[i].GridTranId">
        </td>
        <td>@TrimsData[i].SerialNumber</td>
        <td>@TrimsData[i].GridOrderDate</td>
        <td>@TrimsData[i].GridSyleNo</td>
        <td>@TrimsData[i].GridItemName</td>
        <td>@TrimsData[i].GridItemCode</td>
        <td>@TrimsData[i].GridStoreName</td>
        <td>@TrimsData[i].GridSupplierName</td>
        <td>@TrimsData[i].GridOrderQty</td>
        <td>@TrimsData[i].GridUnitName</td>
        <td>@TrimsData[i].GridUnitPrice</td>
        <td>@TrimsData[i].GridDeliveryDate</td>
        <td>@TrimsData[i].GridRemarks</td>
        <td>
            @Html.TextBoxFor(m => m.TrimsData[i].SupplierDate, new {@class = "form-control datepicker", @placeholder = "Supplier Date" })
        </td>
        <td>
            @Html.TextBoxFor(m => m.TrimsData[i].RevisedDate, new {@class = "form-control datepicker", @placeholder = "Revised Date" })
        </td>

        <td>
            @Html.TextBoxFor(m => m.TrimsData[i].InHouseDate, new {@class = "form-control datepicker", @placeholder = "In House Date" })
        </td>
    </tr>
}

或者，如果您有另一个具有唯一值的 TrimsData 属性，请使用该属性设置文本框 ID 值，如下例所示：

@Html.TextBoxFor(m => m.SupplierDate, new {@class = "form-control datepicker", @placeholder = "Supplier Date", @id = trimsData.Id })

相关问题：

JQuery Datepicker for multiple .NET MVC Input Fields not working

Answer 2

我认为的一个原因是日期选择器在呈现动态文本框之后运行。您必须再次触发 datepicker 初始化才能使其工作。