在同一页面上使用多个扩展表单和引导日期选择器

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>

现在同一页上多个日期选择器可以正常工作。

{!! 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来自于扩展表单的脚本

<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>

当第二个日期选择器弹出时它不起作用。有什么想法？

- Yousef Altaf

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 函数的函数。

Codepen 示例: https://codepen.io/lthomas122/pen/XQyOMm

- Liam

---

是的，它起作用了，但是第二个“日期选择器”会延迟，我必须先单击其外部一次，然后再次单击才能显示。 - Yousef Altaf

可能更好的方法是将 onfocus 更改为 onclick。焦点事件监听器有时会出现错误，点击监听器似乎表现更好，尽管这不是最理想的解决方案。如果可以的话，最好在页面加载和 JS 启动之前预先呈现所有表单输入。 - Liam

Answer 2

快速隔离

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

this 这里它将保持隔离

- mooga

---

仍然没有成功，仍需要在它外面点击一次，然后再次点击才能显示。 - Yousef Altaf

无论如何，我将尝试另一个“扩展表单”脚本，因为这个脚本在所有字段中都存在问题。 - Yousef Altaf