Help with daterange on button

[amarcozzi]

I'm having a difficult time getting date range functionality to work when I press a button. How do you assign the two daterange objects, start and end, to trigger on the same button? If I try to initialize both to the same button as in const picker_start = datepicker(filterBtn, {id:1}) and const picker_end = datepicker(filterBtn, {id:1}) I get the following error:

Uncaught Error: A datepicker already exists on that element. at datepicker.min.js:1 at t.default (datepicker.min.js:1) at main.js:41

But if I initialize both picker_start and picker_end to different classes, and add an event handler to the button, then both calendars close simultaneously. e.g.

const picker_start = datepicker('.start', {id:1})

const picker_end = datepicker('.end',  {id:1})

filterBtn.addEventListener('click', e => {
  // THIS!!! Prevent Datepicker's event handler from hiding the calendar.
  e.stopPropagation()

  // Toggle the calendar.
  var isHidden = picker_start.calendarContainer.classList.contains('qs-hidden')
  picker_start[isHidden ? 'show' : 'hide']()
  isHidden = picker_end.calendarContainer.classList.contains('qs-hidden')
  picker_end[isHidden ? 'show' : 'hide']()
})

Thank you for your help!

[Miguel040]

@amarcozzi I have a similar problem. Did you solve it? Can you please present your solution

[amarcozzi]

@Miguel040 Sorry I never figured this out. I moved on to using two instances of HTML datetime input objects for start/end dates.

[qodesmith]

@amarcozzi @Miguel040 I know this is late, but check out this fiddle if you want to toggle a daterange pair from a button. It's a bit manual, but it gets the job done! Let me know if you were looking for something else.