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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: