How to tell editor to use a value for input field

ksieke

Good morning guys,

i have a little issue with the editor.

I have some data that uses datetime-local format, so the user has to pick date, month, year, hour and minute. For selecting i use the browser-built-in datetimepicker - works fine.

In my software the user has to fill in a report what happens on a specific day (with up to 10 entrys/report).
Problem: The editor does not set the report date (e.g. 2023-01-13) as value, so the picker always uses "now()".

Thanks for helping me how to pass the date into the input field - i really haven't found a solution anywhere. Would be nice to have the dateformat "DD.MM.YYYY HH:MM"

(I skip the html.. it's just thead...)

JS:

$(document).ready(function() {
    $.ajaxSetup( {
        headers: {
            'X-CSRF-Token': csrfToken
        }
    } );
    // Activate an inline edit on click of a table cell
    let getData = async () => {

    }
    var editor;

    var i = 0;
    const types = [];
    for(var key in test) {
        types.push({
            'label': test[key],
            'value': key
        });
    }

    editor = new $.fn.dataTable.Editor({
        ajax: {
            url: "/reports-activities/update_reports/" + $('#report_id').html(),
            data: function(d) {
                d.csrfName;
            }
        },
        table: "#table-reports",
        idSrc:  'id',
        fields: [{
            label: "Activity Type",
            name: "activity_type",
            type: "select",
            options: types,
        },{
            label: "Starts at",
            name: "starts_at",
            attr: {
                type:'datetime-local'
            },
            format: 'YYYY-MM-DDTHH:mm:ss',
            displayFormat: "YYYY-MM-DD HH:mm:ss"
        },{
            label: "Ends at",
            name: "ends_at",
            attr: {
                type:'datetime-local'
            },
            format: 'YYYY-MM-DDTHH:mm:ss',
            displayFormat: "YYYY-MM-DD HH:mm:ss",
        },{
            label: "Train Number",
            name: "train_number",
        },{
            label: "Train From",
            name: "train_from",
        },{
            label: "Train to",
            name: "train_to",
        },{
            label: "Tfz",
            name: "tfz",
        },{
            label: "Note",
            name: "note",
        }]
    });

    $('#table-reports').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            onBlur: 'submit'
        } );
    } );

    // Delete row
    $('#table-reports').on( 'click', 'tbody td.row-remove', function (e) {
        editor.remove( this.parentNode, {
            title: 'Delete record',
            message: 'Are you sure you wish to delete this record?',
            buttons: 'Delete'
        } );
    } );
    // Convert ISO8601 dates into a simple human readable format
    var table = $('#table-reports').DataTable( {
        language: {
            search: 'In der Tabelle finden',
            url: '...editor_locale.json',
        },
        searching: false,
        responsive: true,
        dom: "Bfrtip",
        ajax: {
            "url" : "/reports-activities/get-activitys-by-report/" + $('#report_id').html(),
            "data" : function(d) {
            }
        },
        columns: [
            {   // Responsive control column
                data: null,
                defaultContent: '',
                className: 'control',
                orderable: false
            },
            {   // Checkbox select column
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "id" },
            { data: "activity_type", render: function(data) {
                    if(data == null) {
                        return '';
                    }
                    for(var key in types) {
                        if(key == data) {
                            return types[key]['label'];
                        }
                    }
                }},
            { data: "starts_at", render: function(data) {
                    return moment(data).format('DD.MM.YYYY HH:mm');
                }
            },
            { data: "ends_at", render: function(data) {
                    return moment(data).format('DD.MM.YYYY HH:mm');
                }
            },
            { data: "train_number"},
            { data: "train_from"},
            { data: "train_to"},
            { data: "tfz"},
            { data: "note"},
        ],
        order: [ 2, 'asc' ],
        select: {
            style:    'os',
            selector: 'td.select-checkbox'
        },
        buttons: [ {
            extend: "createInline",
            editor: editor,
            formOptions: {
                submitTrigger: -2,
                submitHtml: '<i class="fa fa-play"/>'
            }
        },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    });
}); 

Ajax-Response:

"data": [
        {
            "id": 27,
            "report_id": 23,
            "activity_type": 0,
            "starts_at": "2023-01-14T11:00:00+01:00",
            "ends_at": "2023-01-13T02:00:00+01:00",
            "train_number": "",
            "train_from": "",
            "train_to": "",
            "tfz": "",
            "note": "",
            "created": "2023-01-14T01:46:03+01:00",
            "modified": "2023-01-16T12:36:48+01:00",
            "DT_RowId": "row_27"
        },.... 

ksieke

Oh and another thing - as you see i am using inedit in addition with a new button in a new row. I also ust submit on blur.

When i create a new row and just provide one or two columns with data, on blur results in removing the line instead of saving it

Any ideas?

Thanks in advance.

allan

Hi,

As you are using a regular text field with the type parameter set to be datetime-local the format and displayFormat parameters will have no effect.

The display format will be entirely dependent upon what the browser displays it as and the value should be ISO8601 - e.g. 2018-06-12T19:30 (see MDN for more details).

Are you able to give me a link to your page so I can try to trace through what is going wrong please?

When i create a new row and just provide one or two columns with data, on blur results in removing the line instead of saving it

That suggests you might be applying a "where" condition that isn't being met by the new row?

Allan

ksieke

Hey everyone,

Allan helped me with the problem.
Just to let you know if you run into the same problem:

1.) I changed the datetime-value server-side and removed the offset (+01:00)
2.) i added an hidden input field somewhere and got the default value from there and added it to the editor

            def: function() {
                return $('#report_starts_at').val();
            },

3.) I changed the on click for the blur to:

    $('#table-reports').on( 'click', 'tbody tr:not(.dte-inlineAdd) td:not(:first-child)', function (e) {
        editor.inline(this, {
            onBlur: 'submit'
        });
    } );

4.) I added the submit onblur option to the CreateInline button

        buttons: [ {
            extend: "createInline",
            editor: editor,
            formOptions: {
                onBlur: 'submit',
                submitTrigger: -1,
                submitHtml: '<i class="fa fa-play"/>'
            }
        }
        ]

Now everything works like a charme.