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>'
     }
},

用于初始化datepicker的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');
});

jQuery DataTable中的bootstrap datepicker无法在Laravel应用程序

1 个答案: