Bootstrap 4 datetimepicker表格中仅首个日期选择器可点击问题求助

你猜的完全没错！问题的核心就是HTML ID的唯一性——你循环生成的所有日期选择器都用了同一个datetimepicker1 ID，但HTML规范里ID必须是页面唯一的，所以jQuery的$('#datetimepicker1')只会绑定第一个匹配到的元素，后面的日期选择器自然就没反应了。

下面给你两种简单的解决方法，按需选择：

方法1：用类选择器批量初始化（推荐） #

这种方法最简洁，不需要处理唯一ID，直接通过类来批量绑定所有日期选择器：

修改HTML代码 #

把所有硬编码的datetimepicker1 ID替换成通用类（比如datetimepicker-container），同时调整data-target的指向，让控件能正确关联到自己的容器：

<tbody>
@foreach (var item in Model.ViewModel.TrainingsList)
{
<tr>
<td>@item.Name</td>
<td>
<div class="form-group">
<!-- 把id换成类，保留input-group date类 -->
<div class="input-group date datetimepicker-container" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target=".datetimepicker-container" asp-for="@item.Id" value="@item.TrainingDate"/>
<!-- 去掉append里的data-target，让它自动匹配最近的容器 -->
<div class="input-group-append" 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代码 #

把原来的ID选择器换成类选择器，一次性初始化所有日期选择器：

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

方法2：生成唯一ID（适合需要单独控制的场景） #

如果需要对某个日期选择器单独配置，或者担心类选择器冲突，可以给每个容器生成唯一ID：

修改HTML代码 #

利用循环里的item.Id生成唯一ID，确保每个日期选择器的ID不重复：

<tbody>
@foreach (var item in Model.ViewModel.TrainingsList)
{
<tr>
<td>@item.Name</td>
<td>
<div class="form-group">
<!-- 用item.Id生成唯一ID -->
<div class="input-group date" id="datetimepicker-@item.Id" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker-@item.Id" asp-for="@item.Id" value="@item.TrainingDate"/>
<div class="input-group-append" data-target="#datetimepicker-@item.Id" 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代码 #

用属性选择器匹配所有以datetimepicker-开头的ID，批量初始化：

<script type="text/javascript">
$(document).ready(function () {
    // 匹配所有id以datetimepicker-开头的元素
    $('[id^="datetimepicker-"]').datetimepicker({
        sideBySide: true,
    });
});
</script>

两种方法都能解决你的问题，推荐用方法1，代码更简洁，后续维护也更省心~

内容的提问来源于stack exchange，提问作者hubmik