Datatable's Editor Date Picker doesn't display calender chooser

mccwebdev

I'm working on a Laravel application and unable to get the built-in Datatable's Editor date picker to function when trying to add or edit an entry. It will not open the calendar picker like your example: https://editor.datatables.net/examples/styling/bootstrap4.html. I've loaded Datatables from NPM, everything seems to be functioning properly, however the calendar picker doesn't display. I've downloaded and imported Editor 1.9.0 (dataTables.editor.js and editor.bootstrap4.js) locally into the app. Here's following dependencies:

"dependencies": {
        "bootstrap": "^4.3.1",
        "bootstrap-select": "^1.13.8",
        "datatables.net": "^1.10.19",
        "datatables.net-bs4": "^1.10.19",
        "datatables.net-buttons": "^1.5.6",
        "datatables.net-buttons-bs4": "^1.5.6",
        "datatables.net-responsive": "^2.2.3",
        "datatables.net-responsive-bs4": "^2.2.3",
        "datatables.net-rowreorder-bs4": "^1.2.5",
        "datatables.net-scroller": "^2.0.0",
        "datatables.net-scroller-bs4": "^2.0.0",
        "datatables.net-select": "^1.3.0",
        "datatables.net-select-bs4": "^1.3.0",
        "imagemin": "^6.1.0",
        "jquery": "^3.2",
        "jquery-ui": "^1.12.1",
        "vue-template-compiler": "^2.6.8"
    }

These dependencies are loaded in bootstrap.js:

    window.$ = window.jQuery = require('jquery');

    require('bootstrap');

    require('datatables.net');
    require('datatables.net-bs4');
    require('datatables.net-buttons-bs4');
    require('datatables.net-buttons/js/buttons.colVis.js');
    require('datatables.net-buttons/js/buttons.flash.js');
    require('datatables.net-buttons/js/buttons.html5.js');
    require('datatables.net-buttons/js/buttons.print.js');
    require('datatables.net-rowreorder-bs4');
    require('datatables.net-responsive-bs4');
    require('datatables.net-scroller-bs4');
    require('datatables.net-select-bs4');

    require('bootstrap-select/dist/js/bootstrap-select.js');

Code below:

var appointment_admin_notes = new $.fn.dataTable.Editor({
                ajax: {
                    url: '{{ route("profile.appointment.adminnote.index", [Route::current()->parameters()["profile"], Route::current()->parameters()["appointment"]]) }}',
                },
                table: '#appointment-admin-notes',
                fields: [
                    {   type:  'textarea',
                        label: 'Note <span class="required"></span>', 
                        name: 'note' 
                    },
                    {
                        type: 'datetime',
                        label: 'Remind On',
                        name: 'reminder_date',
                    }
                ],
                i18n: {
                    create: {
                        button: 'Add',
                        title:  '<h4>Add Administrative Note</h4>',
                        submit: 'Add'
                    },
                    edit: {
                        button: 'Edit',
                        title:  '<h4>Edit Administrative Note</h4>',
                        submit: 'Update'
                    },
                    remove: {
                        button: 'Delete',
                        title:  '<h4>Delete Administrative Note</h4>',
                        submit: 'Delete',
                        confirm: {
                            _: "Are you sure you want to delete %d administrative notes?",
                            1: "Are you sure you want to delete this administrative note?"
                        }
                    }
                }
            });

var appointment_admin_notes_table = $('#appointment-admin-notes').DataTable(
            {
                dom: "frtip",
                select: true,
                pageLength: 5,
                order: [1, 'desc'],
                ajax: {
                    url: '{{ route("profile.appointment.adminnote.index", [Route::current()->parameters()["profile"], Route::current()->parameters()["appointment"]]) }}',
                },
                columns: [
                    {title: 'Note', data: 'note'},
                    {   title: 'Remind On', 
                        data: null,
                        render: function ( data, type, row ) {
                            if (data.reminder_date == null)
                                return '';
                            else 
                                return formatCourseDate(data.reminder_date.substring(0,10)); 
                        }
                    },
                    {   title: 'Created', 
                        data: null,
                        render: function ( data, type, row ) {
                            return formatCourseDate(data.created_at.substring(0,10)); 
                        }
                    },
                ],
            });

            // Display the buttons
            new $.fn.dataTable.Buttons(appointment_admin_notes_table, [
                { extend: "create", text: '<div class="material-icons border mr-2 rounded-lg md-16 text-white d-inline-block align-middle">add</div>', editor: appointment_admin_notes },
                { extend: "edit", text: '<div class="material-icons border mr-2 rounded-lg md-16 text-white d-inline-block align-middle">edit</div>', editor: appointment_admin_notes },
                { extend: "remove", text: '<div class="material-icons border mr-2 rounded-lg md-16 text-white d-inline-block align-middle">delete_forever</div>', editor: appointment_admin_notes }
            ] );                                    

            $('#appointment-admin-notes-toolbar').append(appointment_admin_notes_table.buttons().container());

allan

I wonder if there might be a z-index issue on the page. The date picker might be shown behind a modal perhaps? If you can give me a link to the page I can take a look.

Thanks,
Allan

mccwebdev

Thank you Allan, this started me down that direction. I started to prepare a JS Bin for you and could see the calendar display behind, and then realized it may be a css issue and was able to get it to function properly in JS Bin. Ultimately, it was my mistake and as I loaded just the Editor JS files, but not the Editor Bootstrap CSS file. Once I did that it resolved the issue.