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

Posted 2023-03-14

【中文标题】jQuery DataTable中的引导日期选择器在Laravel应用程序中不起作用

【英文标题】：bootstrap datepicker inside jQuery DataTable not working in Laravel app

【发布时间】：2015-09-20 01:14:06

【问题描述】：

我尝试在 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');
);

感谢任何帮助或提示。

【问题讨论】：

创建 jsfiddle，可以帮助想要帮助的人

.input-append 和 .date 之间的空格是您的问题中的错字，还是您的代码中的错字？

@RichardDeeming 那是我目前的代码，但是即使没有空间它也不起作用

【参考方案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');
);