Issue when working with same class on multiple fields

[anupalhub]

trafficstars

Hi,

I have 3 daterange pickers with same class filterdaterange. For first one its opening fine BUT for second and third input the daterange picker is auto closing immedeately after opening. I don't want to write another jQuery selector and with different class How could i approach it with same class name on multiple fields?

JSFiddle: https://jsfiddle.net/anupalusoft/v8bpb76s/6/

[holtkamp]

Can you provide a JSFiddle with an example that illustrates this use case?

[anupalhub]

JSFiddle pasted in my question. Please check.

[holtkamp]

mm, problem seems to be somewhere here https://github.com/longbill/jquery-date-range-picker/blob/4fb8159da3122cc7de753d26c47fb54d4c446c35/jquery.daterangepicker.js#L763-L768.

I don't have time to dive into this, but thanks for reporting this

[buburian]

there is a simple way before code fixed

$(".class").each(function(index, element) {
$(element).dateRangePicker(......);
});

[anupalhub]

@buburian I did the same way but not successful when using .bind('datepicker-open', function() for individuals. It becomes buggy and unresponsive for action applied with in .bind I will post a JSFiddle later.

[teledirigido]

I have changed this function $(document).on('click.datepicker', outsideClickClose); to the following:

function outsideClickClose(evt) {
  var hasClickedOutside = true;
  var isVisible = function(elem) {
    return !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
  };

  self.each(function(index){
    if (self[index].contains(evt.target)) {
      if ( isVisible($('.date-picker-wrapper')[0]) ) {
        hasClickedOutside = false;
        }
    }
  });
      
      if(hasClickedOutside) {
          if (box.is(':visible')) closeDatePicker();
      }
  }

This worked for me.