bootstrap datepicker inside jQuery DataTable not working in Laravel app

Question

I tried to insert a datepicker field instead of <input type="month"/> inside a jQuery DataTable cell. However it is not working. I tried different methods but the calendar never showed up and the chrome editor console didn't show any errors. However the current solution it shows:

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

The code inside the DataTable is:

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

And the javascript to initialize the datepicker:

$(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');
});

Any help or hints is appreciated.

Answer 1

Since the input-append and date classes are both on the same element, there shouldn't be a space in the selector. With the space, you're looking for an element with the class date which is a descendant of an element with the class input-append . Without it, you're looking for an element which has both classes.

Another obvious problem is the $(this).next().datepicker(...) line. 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 instead.

Finally, your template is assigning the same fixed id to every add-on element. IDs need to be unique within the document. I'd suggest removing the ID, and using a different selector to find the trigger element.

{
    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');
});