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/

Answer 1

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