大家好,我正在使用pickadate.js为我的项目设置日期,但我遇到了一个问题。我正在添加用于动态选择项目中日期的输入。我为它们设置了from
to
限制,对于第一组输入,它们工作正常,但对于我动态添加的元素from
to
日期不起作用。这是我的代码:
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>
和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)
}
})
我尝试使用each()
定位我的输入,但它没有帮助。这是codepen,你可以看到发生了什么。基本上我不知道如何定位被点击的this
集输入的限制。尝试使用前两个输入和
您将看到限制正常工作,但它们未应用于第二组输入。
https://codepen.io/Karadjordje/pen/KeNRxZ?editors=1010