Quantcast
Channel: DataTables 1.10 — DataTables forums
Viewing all articles
Browse latest Browse all 2364

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

$
0
0

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());

Viewing all articles
Browse latest Browse all 2364

Trending Articles