多个引导日期选择器在同一页面上具有扩展表单

Question

在同一页面上添加更多日期选择器可能是个老问题。但我这里有一个不同的案例。

二手库https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

这是datepicker的脚本

<script>
$(document).ready(function () {
$('.datepicker').datepicker({
keyboardNavigation: false,
forceParse: false,
todayHighlight: true
});
});
</script>

现在，多个date-picker将在同一页面上正常工作。

{!! Form::text('expiry_date', null, ['data-format'=>'D, dd MM yyyy', 'class'=>'form-control datepicker', 'placeholder'=>'yyyy-mm-dd']) !!}
{!! Form::text('expiry_date', null, ['data-format'=>'D, dd MM yyyy', 'class'=>'form-control datepicker', 'placeholder'=>'yyyy-mm-dd']) !!}

但这里的第二个datepicker来自extending形式script

<script>
let counter = 1;
let limit = 10;
function addInput(divName) {
if (counter === limit) {
alert("You have reached the limit of adding " + counter + " inputs");
} else {
let newdiv = document.createElement('div');
newdiv.innerHTML = '<div class = "col-md-12"> <h4>Package ' + (counter + 1) + ' </h4> ...<div class="col-sm-6"><div class="form-group"><div id="date-popup2" class="input-group date">{!! Form::text("expiry_date", null, ["data-format"=>"D, dd MM yyyy", "class"=>"form-control datepicker", "placeholder"=>"yyyy-mm-dd"]) !!}<span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div></div>...';
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>

当第二个datepicker填充时，它的剂量不起作用。任何想法。

Answer 1

这是因为您正在启动.datepicker()，在渲染第二个日期选择器对象之前。

也许尝试类似这样的事情：

$(function() {
$(this).datepicker();
$('#date').append('<p>Other Date: <input onfocus="dateme(this);" type="text" class="datepicker"></p>')
});
function dateme(x){
$(x).datepicker();
}

为了解释这里发生的事情，我附加了一个新的日期选取器输入，该输入具有onfocus=""属性，当输入处于焦点时，该属性将调用包含.datepicker函数的函数。

代码笔示例：https://codepen.io/lthomas122/pen/XQyOMm

Answer 2

用于快速隔离

$('.datepick').each(function(){
$(this).datepicker({
keyboardNavigation: false,
forceParse: false,
todayHighlight: true
});
// apply the rest
}); 

this在这里它会保持隔离