jQuery DataTable 中的 bootstrap datepicker 在 Laravel 应用程序中不起作用

Question

我试图在 jQuery DataTable 单元格中插入一个 datepicker 字段而不是<input type="month"/> 。 但是它不起作用。 我尝试了不同的方法，但日历从未出现，chrome 编辑器控制台也没有显示任何错误。 然而，当前的解决方案显示：

Uncaught TypeError: Cannot read property 'left' of undefined
    Datepicker.place @ bootstrap-datepicker.js:609
    Datepicker.show @ bootstrap-datepicker.js:420
    b.extend.proxy.b.isFunction.i @ jquery-1.9.1.min.js:3
    b.event.dispatch @ jquery-1.9.1.min.js:3
    b.event.add.v.handle @ jquery-1.9.1.min.js:3

DataTable里面的代码是：

{
     className: '',
     orderable: false,
     data: function (row, type, set, meta) {
         return '<div class="input-append date">'+
                    '<input type="text" class="form-control" value="{{Carbon\Carbon::now()->format('m-Y')}}">'+
                    '<span class="add-on" id="datepick" ><i class="fa fa-calendar"></i></span>'+
                 '</div>'
     }
},

以及用于初始化日期选择器的 javascript：

$(document).ready('.input-append .date').datepicker({
    format: "M/yyyy",
    minViewMode: 1,
    multidate: true,
    autoclose: true,
    beforeShowMonth: function (date){
        switch (date.getMonth()){
            case 8:
                return false;
        }
    },
    toggleActive: true

});
$('#datepick').click(function () {
    $(this).next().datepicker('show');
});

任何帮助或提示表示赞赏。

Answer 1

由于input-append和date类都在同一个元素上，因此选择器中不应有空格。 有了这个空间，您正在寻找一个具有类date的元素，它是具有类input-append的元素的后代。 没有它，您正在寻找具有两个类的元素。

另一个明显的问题是$(this).next().datepicker(...)行。 next方法返回匹配元素的紧随其后的同级元素。 由于您在#datepick元素上调用它，它是input-append元素的最后一个子元素，因此不会有兄弟元素要返回。 我怀疑您需要改用closest方法。

最后，您的模板为每个add-on元素分配了相同的固定id 。 ID 在文档中必须是唯一的。 我建议删除 ID，并使用不同的选择器来查找触发元素。

{
    className: '',
    orderable: false,
    data: function (row, type, set, meta) {
        return '<div class="input-append date">'+
            '<input type="text" class="form-control" value="{{Carbon\Carbon::now()->format('m-Y')}}">'+
            '<span class="add-on" ><i class="fa fa-calendar"></i></span>'+
        '</div>'
    }
},
...

$(document).ready('.input-append.date').datepicker({
    format: "M/yyyy",
    minViewMode: 1,
    multidate: true,
    autoclose: true,
    beforeShowMonth: function (date){
        switch (date.getMonth()){
            case 8:
                return false;
        }
    },
    toggleActive: true
});

$(document).on("click", ".input-append.date .add-on", function () {
    $(this).closest(".input-append.date").datepicker('show');
});