jquery - Bootstrap Datetimepicker 页面上有不止一组链接的选择器

Question

我正在使用 Eonasdan Bootstrap Datetimepicker https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers并正在尝试设置链接选择器。

如果页面上有一对选择器，我可以让它根据需要工作，但如果我有不止一对，则不能 - 我正在使用类来定位选择器，所以我认为我的问题是如何处理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>

JS:

    $('.dp').datetimepicker({
        showTodayButton: true,
        showClose: true,
        toolbarPlacement: "bottom",
        format: "DD/MM/YYYY",
        widgetPositioning: {
            vertical: 'bottom',
            horizontal: 'left'
        }
    }).on('dp.change',function(e){
        $('.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){
        $('.dp').data("DateTimePicker").maxDate(e.date);
    });

选择器第一次出现在页面上时，它们会按预期工作 - 设置日期 1，然后日期 2 的选择器具有日期 1 值的最小日期，并且无法选择更早的日期。

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

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

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

https://jsfiddle.net/e9wrfg6q/1/

Answer 1

您需要选择兄弟关系最接近的'dp'和'dp2'。 e.i:具有相同的祖 parent ，在本例中是'row'。目前，第一个 'dp' 或 'dp2' 将始终被选中。

以下是您可以采取的方法:

而不是:

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

你应该有类似的东西:

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

这样您就只能定位与“dp”相关的“dp2”，反之亦然。完整的 js 代码可能类似于:

$('.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);
    });