Jquery 引导Datetimepicker页上有多组链接的选择器

我正在使用Eonasdan引导Datetimepicker并尝试设置链接选择器

如果我在一个页面上有一对选择器，我可以根据需要让它工作，但如果我有多对选择器，则不能工作-我使用类来定位选择器，因此我假设我的问题是如何触发dp.change

代码类似于：

<form>
   <div class="container">
      <div class="row">
          <div class="col-md-6">
            <input type="text" name="start" class="dp">
          </div>
          <div class="col-md-6">
            <input type="text" name="end" class="dp2">
          </div>
      </div>

   </div>

   <div class="container">
      <div class="row">
          <div class="col-md-6">
            <input type="text" name="start" class="dp">
          </div>
          <div class="col-md-6">
            <input type="text" name="end" class="dp2">
          </div>
      </div>

   </div>   
</form>

当选择器第一次出现在页面上时，它们按预期工作-设置日期1，然后日期2的选择器的最小日期值为日期1，并且不能选择更早的日期

第二次出现选择器时，它没有正确链接-选择器仍在工作等，但它们没有链接

由于使用此选项的系统的动态特性，我无法使用ID来定位选择器，因为我可能有1对或20对

有没有办法让第二个和后续选择器正确链接

---

您的jQuery选择器只能找到

.dp

/

.dp2

的第一个实例。如果我们将每个日期范围包装在

.date range

类中（在

.row

级别），那么我们可以在该上下文中搜索开始/结束日期字段：

$（“.date range”）。每个（函数（索引，范围）{
var$from=$（范围）.find（“.dp”）.first（）；
var$to=$（范围）.find（“.dp2”）.first（）；
$from.datetimepicker({
ShowToday按钮：正确，
showClose：没错，
工具栏位置：“底部”，
格式：“DD/MM/YYYY”，
WidgetPosition：{
垂直：“底部”，
水平：“左”
}
}).on（'dp.change'，功能（e）{
$to.data（“DateTimePicker”）.minDate（即日期）；
})
.prop（'type'，'text'）
.绑定({
模糊：功能（ev）{
Form.Options.Validate.onkeyup（$（this），ev）；
}
});
$to.datetimepicker({
ShowToday按钮：正确，
showClose：没错，
工具栏位置：“底部”，
useCurrent:false，
格式：“DD/MM/YYYY”，
WidgetPosition：{
垂直：“底部”，
水平：“左”
}
}).on（'dp.change'，功能（e）{
$from.data（“DateTimePicker”）.maxDate（e.date）；
})
.prop（'type'，'text'）
.绑定({
模糊：功能（ev）{
Form.Options.Validate.onkeyup（$（this），ev）；
}
});
});
您需要选择具有最近的兄弟关系的
'dp'
和
'dp2'
。e、 i:有相同的祖父母，在本例中是“行”。现在，将始终选择第一个
'dp'
或
'dp2'

以下是您可以采取的措施：

而不是：

$('.dp2').data("DateTimePicker").minDate(e.date);

您应该选择以下内容：

$(this).parents('.row')
       .find('.dp2')
       .data("DateTimePicker")
       .minDate(e.date);

$('.dp').datetimepicker({
        showTodayButton: true,
        showClose: true,
        toolbarPlacement: "bottom",
        format: "DD/MM/YYYY",
        widgetPositioning: {
            vertical: 'bottom',
            horizontal: 'left'
        }
    }).on('dp.change',function(e){

        $(this).parents('.row')
           .find('.dp2')
           .data("DateTimePicker")
           .minDate(e.date);
    });

    $('.dp2').datetimepicker({
        showTodayButton: true,
        showClose: true,
        toolbarPlacement: "bottom",
        useCurrent: false,
        format: "DD/MM/YYYY",
        widgetPositioning: {
            vertical: 'bottom',
            horizontal: 'left'
        }
    }).on('dp.change',function(e){
        $(this).parents('.row')
               .find('.dp')
               .data("DateTimePicker")
              .maxDate(e.date);
    });

这样，您只针对与“dp”相关的“dp2”，反之亦然。
完整的js代码可能看起来像：

$(this).parents('.row')
       .find('.dp2')
       .data("DateTimePicker")
       .minDate(e.date);

$('.dp').datetimepicker({
        showTodayButton: true,
        showClose: true,
        toolbarPlacement: "bottom",
        format: "DD/MM/YYYY",
        widgetPositioning: {
            vertical: 'bottom',
            horizontal: 'left'
        }
    }).on('dp.change',function(e){

        $(this).parents('.row')
           .find('.dp2')
           .data("DateTimePicker")
           .minDate(e.date);
    });

    $('.dp2').datetimepicker({
        showTodayButton: true,
        showClose: true,
        toolbarPlacement: "bottom",
        useCurrent: false,
        format: "DD/MM/YYYY",
        widgetPositioning: {
            vertical: 'bottom',
            horizontal: 'left'
        }
    }).on('dp.change',function(e){
        $(this).parents('.row')
               .find('.dp')
               .data("DateTimePicker")
              .maxDate(e.date);
    });

谢谢-这个选项最适合我，因为我不需要修改任何现有的HTML代码