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

одна причина, по-моему, в том, что средство выбора даты запускается после отображения динамических текстовых полей.Вы должны снова вызвать инициализацию DatePicker для его работы.

Answer 2

Похоже, что ваша проблема произошла, потому что вы помещаете @Html.TextBoxFor() помощники в цикл foreach с предопределенным параметром @id = "SupplierDate", который отображает все соответствующие текстовые поля с одинаковым атрибутом 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 свойство, которое имеет уникальное значение, установите значения идентификатора текстового поля с этим свойством, как в примере ниже:

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

Связанная проблема:

JQuery Datepicker для нескольких входных данных .NET MVCПоля не работают