Bootstrap Datetimepicker 页面上有多个链接的选择器

Question

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

如果我在一个页面上有一对选择器，我可以根据需要让它工作，但如果我有一对以上的选择器，我就不能让它工作 - 我正在使用类来定位选择器，所以我假设我的问题与 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 值的最小日期，并且不能选择更早的日期。

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

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

有没有办法让第二个和后续的选择器正确地link？

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

Answer 1

您的 jQuery 选择器只会找到 .dp / .dp2 的第一个实例。如果我们将每个日期范围包装在 .date-range class 中（在 .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>

Answer 2

您需要 select 'dp' 和 'dp2' 具有最亲密的 手足关系 。 e.i：有 相同的盛大 parent，在本例中为 'row'。现在，第一个 'dp' 或 'dp2' 将始终被 selected。

您可以按照以下方式进行操作：

而不是：

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

Bootstrap Datetimepicker 页面上有多个链接的选择器

Bootstrap Datetimepicker more than one set of linked pickers on a page

jquery

twitter-bootstrap

bootstrap-datetimepicker

eonasdan-datetimepicker