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

Question

I am using Eonasdan Bootstrap Datetimepicker https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers and am trying to setup linked pickers.

I can get it to work as needed if I have one pair of pickers on a page but not if I have more than one pair - I am using classes to target the pickers so I assume my issue is to do with how the dp.change is triggered.

Code is something like:

<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);
    });

The first time the pickers appear on the page they work as expected - date 1 is set and the picker for date 2 then has a min date of the value of date 1 and no earlier dates can be chosen.

The second time the picker appears it does not link correctly - the pickers still work etc but they are not linked.

Due to the dynamic nature of the system where this is used I cannot use ID's to target the pickers as I could have 1 pair or 20 pairs.

Is there a way to get the second and subsequent pickers to link correctly?

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

Medard · Accepted Answer · 2017-05-12T09:40:50.037

You need to select 'dp' and 'dp2' that have the closest sibling relationship. e.i: have the same grand parent, in this case 'row'. Right now, the first 'dp' or 'dp2' will always be selected.

Here is how you could go about it:

Instead of:

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

You should rather have something like:

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

This way you are only targeting 'dp2' that is related to 'dp' and vice versa. You full js code could look something like:

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

Thanks - this option worked best for me as I didn't need to modify any existing HTML code — bhttoan, May 18 '17 at 10:44

score 1 · Answer 2 · answered May 12 '17 at 08:36

Your jQuery selectors are only ever finding the first instance of .dp / .dp2. If we wrap each date range in a .date-range class (at the .row level), we can then search for the start / end date fields within that context:

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

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

2 Answers2