一张桌子上有许多日期选择器

Posted 2023-05-08

【中文标题】一张桌子上有许多日期选择器

【英文标题】：Many datepickers in one table

【发布时间】：2020-06-30 17:21:04

【问题描述】：

我正在使用 Bootstrap 4 datetimepicker 库https://tempusdominus.github.io/bootstrap-4/Usage/ 我的页面上有一张表格，每一行都有一个日期选择器。现在，这些日期选择器正在正确呈现，但只有第一个日期选择器在单击时做出反应（显示日历），而其他日期选择器没有反应。 就像我的函数只指向单个 datepicker 的 id，它应该存储类似 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>

【问题讨论】：

id 属性在 DOM 中必须是唯一的。复制它们是无效的。将选择器更改为一个类，它将起作用。例如。 $('.date').datetimepicker();

【参考方案1】：

为每个日期选择器使用唯一 ID。 示例：

<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 并且还像follow一样更改jquery。

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