Много сборщиков данных в одном столе - PullRequest
Новая
       17

Много сборщиков данных в одном столе

0 голосов
/ 19 марта 2020

Я использую Bootstrap 4 библиотеки datetimepicker https://tempusdominus.github.io/bootstrap-4/Usage/ У меня есть таблица на моей странице, и в каждой строке есть один DatePicker. И теперь эти средства выбора даты отображаются правильно, но только первый средство выбора даты реагирует на щелчок (показывает календарь), когда остальные не реагируют. Это как моя функция указывает только на один идентификатор DatePicker, когда он должен хранить что-то вроде Array Id. Я понятия не имею, как это изменить.

HTML

                <tbody>
                @foreach (var item in Model.ViewModel.TrainingsList)
                {
                    <tr>
                        <td>@item.Name</td>
                        <td>
                            <div class="form-group">
                                <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" asp-for="@item.Id" value="@item.TrainingDate"/>
                                    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                                        <div class="input-group-text">
                                            <i class="far fa-calendar"></i>
                                            <i class="far fa-clock"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                }
            </tbody>

JQuery

    <script type="text/javascript">
    $(document).ready(function () {
        $('#datetimepicker1').datetimepicker({
            sideBySide: true,
        });
    });
</script>

1 Ответ

0 голосов
/ 19 марта 2020

Используйте уникальный идентификатор для каждого выбора даты.
Пример: 

<tr>
                    <td>@item.Name</td>
                    <td>
                        <div class="form-group">
                            <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                                <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" asp-for="@item.Id" value="@item.TrainingDate" id="datetimepicker1"/>
                                <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                                    <div class="input-group-text">
                                        <i class="far fa-calendar"></i>
                                        <i class="far fa-clock"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>

И изменить data-target и id в каждом ряду как datetimepicker2, datetimepicker3
И также изменить jquery как следовать. 

    <script type="text/javascript">
$(document).ready(function () {
    $('#datetimepicker1, #datetimepicker2, #datetimepicker3').datetimepicker({
        sideBySide: true,
    });
});

...