bootstrap jQuery DataTable 中的日期选择器在 Laravel 应用程序中不工作

Question

我试图在 jQuery DataTable 单元格中插入日期选择器字段而不是 <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 class 都在同一个元素上，所以选择器中不应该有 space。对于 space，您正在寻找具有 class date 的元素，它是具有 class input-append 的元素的后代。没有它，您正在寻找一个同时具有 classes.

的元素

另一个明显的问题是 $(this).next().datepicker(...) 行。 The next method returns the immediately following sibling of the matched element. Since you're calling that on the #datepick element, which is the last child of the input-append element, there won't be a sibling to return. I suspect you need to use 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');
});

bootstrap jQuery DataTable 中的日期选择器在 Laravel 应用程序中不工作

bootstrap datepicker inside jQuery DataTable not working in Laravel app

javascript

jquery

datepicker

laravel

bootstrap-datepicker