1

Hello guys I am using pickadate.js to set dates for my project and I have run into an issue. I am adding inputs for picking dates in my project dynamically. I have setup from to limits for them and for the first set inputs they work fine, but for elements that I add dynamically from to dates don't work. This is my code:

HTML:

<h3>Extend <a href="http://http://amsul.github.io/pickadate.js">pickadate v3</a> to get “from” and “to” date functionality.</h3>
<h4>From:</h4>
<fieldset>
  <input type="text" id="input_from" class="input_from">
</fieldset>
<h4>To:</h4>
<fieldset>
  <input type="text" id="input_to" class="input_to">
</fieldset>
<h4>From:</h4>
<fieldset>
  <input type="text" id="input_from" class="input_from">
</fieldset>
<h4>To:</h4>
<fieldset>
  <input type="text" id="input_to" class="input_to">
</fieldset>

and JS:

$('.input_from').pickadate({
    format: 'dd.mm.yyyy',
});

$('.input_to').pickadate({
    format: 'dd.mm.yyyy',
});

var from_$input = $('.input_from').pickadate(),
    from_picker = from_$input.pickadate('picker')

var to_$input = $('.input_to').pickadate(),
    to_picker = to_$input.pickadate('picker')


// Check if there’s a “from” or “to” date to start with.
if ( from_picker.get('value') ) {
  to_picker.set('min', from_picker.get('select'))
}
if ( to_picker.get('value') ) {
  from_picker.set('max', to_picker.get('select'))
}

// When something is selected, update the “from” and “to” limits.
from_picker.on('set', function(event) {
  if ( event.select ) {
    to_picker.set('min', from_picker.get('select'))    
  }
  else if ( 'clear' in event ) {
    to_picker.set('min', false)
  }
})

to_picker.on('set', function(event) {
  if ( event.select ) {
    from_picker.set('max', to_picker.get('select'))
  }
  else if ( 'clear' in event ) {
    from_picker.set('max', false)
  }
})

I have tried targeting my inputs by using each() but it didn't help. Here is codepen where you can see what is happening. Basically I don't how to target limits for this set inputs that are clicked. Try using first two inputs and you will see that limits work correctly but they are not getting applied to second set of inputs.
https://codepen.io/Karadjordje/pen/KeNRxZ?editors=1010

Zvezdas1989
  • 1,445
  • 2
  • 16
  • 34
  • Note that "id" attributes must have unique values. It looks like you're re-using the same values over and over again. – Pointy Jun 08 '18 at 12:37
  • @Pointy I have tried with unique ID-s also. Here is example: http://jsbin.com/nugosuyiqu/2/edit?html,js,output – Zvezdas1989 Jun 08 '18 at 22:03

0 Answers0