Как использовать DatePicker для динамически заполненных строк?

0

Я работаю с Asp.Net MVC3. Ниже приведена страница просмотра,

<link rel="stylesheet" href="@Url.Content("~/Content/CSS/jquery-ui.css")">  
<script src="@Url.Content("~/Content/Scripts/jquery-1.9.1.js")"></script>  
<script src="@Url.Content("~/Content/Scripts/jquery-ui-1.10.4.js")"></script>  
<script type="text/javascript">
    $(function () {
        $("#Reqrecdt").datepicker();
        $("#Docsreqdt").datepicker();
    });
</script>

@for(i = 0; i <= 3; i++) {
    <tr>
        <td><input type="text" name="ReqrecdDate" id="Reqrecdt" /></td>
        <td><input type="text" name="DocsreqDate" id="Docsreqdt" /></td>
    </tr>
}

Во время выполнения решения я получаю Datepicker для текстового поля первой строки. что мне нужно изменить, чтобы получить datepicker на динамических строках с помощью jquery?

Теги:
datepicker
jquery-ui-datepicker

3 ответа

1

атрибуты id должны быть уникальными на странице. Имея это в виду, вам нужно использовать class:

<script type="text/javascript">
    $(function () {
        $(".Reqrecdt").datepicker();
        $(".Docsreqdt").datepicker();
    });
</script>

@for(i = 0; i <= 3; i++) {
    <tr>
        <td><input type="text" name="ReqrecdDate" class="Reqrecdt" /></td>
        <td><input type="text" name="DocsreqDate" class="Docsreqdt" /></td>
    </tr>
}
1

Поскольку id должен быть уникальным, вам нужно вместо этого использовать класс:

@for(i = 0; i <= 3; i++) {
    <tr>
        <td><input type="text" name="ReqrecdDate" class="Reqrecdt" /></td>
        <td><input type="text" name="DocsreqDate" class="Docsreqdt" /></td>
    </tr>
}

то вы можете использовать . для целевых элементов по имени класса:

$(function () {
    $(".Reqrecdt").datepicker();
    $(".Docsreqdt").datepicker();
});
0

Ваша результирующая разметка будет иметь несколько элементов с одним и тем же идентификатором, поэтому первый из них - все, что попадет в скрипт. Используйте класс class= "Reqrecdt" и измените свой скрипт на $ (". Reqrecdt"). Datepicker();

Сообщество Overcoder
Наверх
Меню