javascript - jQuery DataTable 中的引导日期选择器在 Laravel 应用程序中不起作用

Question

我试图插入一个日期选择器字段而不是 <input type="month"/>在 jQuery DataTable 单元格内。但是它不起作用。我尝试了不同的方法，但日历从未出现，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(...) 行。 The next method返回匹配元素的紧随其后的兄弟。由于您是在 #datepick 元素上调用它，它是 input-append 元素的最后一个子元素，因此不会返回任何兄弟元素。我怀疑你需要使用 the closest method相反。

最后，您的模板将相同的固定 id 分配给每个 add-on 元素。 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');
});