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：有相同的祖父母，在本例中为'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);
    });

Answer 2

您的 jQuery 选择器只会找到.dp / .dp2 的第一个实例。如果我们将每个日期范围包装在 .date-range 类中（在 .row 级别），我们就可以在该上下文中搜索开始/结束日期字段：

$(".date-range").each(function(index, range) {
  var $from = $(range).find(".dp").first();
  var $to = $(range).find(".dp2").first();

  $from.datetimepicker({
      showTodayButton: true,
      showClose: true,
      toolbarPlacement: "bottom",
      format: "DD/MM/YYYY",
      widgetPositioning: {
        vertical: 'bottom',
        horizontal: 'left'
      }
    }).on('dp.change', function(e) {
      $to.data("DateTimePicker").minDate(e.date);
    })
    .prop('type', 'text')
    .bind({
      blur: function(ev) {
        Form.Options.Validate.onkeyup($(this), ev);
      }
    });

  $to.datetimepicker({
      showTodayButton: true,
      showClose: true,
      toolbarPlacement: "bottom",
      useCurrent: false,
      format: "DD/MM/YYYY",
      widgetPositioning: {
        vertical: 'bottom',
        horizontal: 'left'
      }
    }).on('dp.change', function(e) {
      $from.data("DateTimePicker").maxDate(e.date);
    })
    .prop('type', 'text')
    .bind({
      blur: function(ev) {
        Form.Options.Validate.onkeyup($(this), ev);
      }
    });

});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.2/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<form>
  <div class="container">
    <div class="row date-range">
      <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 date-range">
      <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>