Date or Time - Inline editing

karasu

Is it possible to enter or select a time within the line?
Unfortunately, I have found no example for this.

colin

Hi Karasu,

This forum post may help.

Cheers,

Colin

allan

This example shows the datetime input being used inline (Start date column).

Allan

karasu

Thank you very much for your fast answer Colin and Allan.

I want that the User can select and save a time value. (Better write the time value)
I tried many times to let it work but in the Database the value is saved every time as
"00:20:18"
Please help me.

My MySQL Table colum type is TIME
/lib/Editor.php = version 1.6.0

My PHP code

Editor::inst( $db, 'datatables_demo' )
    ->field(                 
        Field::inst( 'time' )            
            ->validator( 'Validate::dateFormat', 'H:i:s' )
            ->getFormatter( 'Format::date_sql_to_format', 'H:i:s' )
            ->setFormatter( 'Format::date_format_to_sql', 'H:i:s' )
    )
    ->process($_POST)
    ->json();

My JS code

var editor; // use a global for the submit and return data rendering in the examples

(function($) {
    $(document).ready(function() {
        editor = new $.fn.dataTable.Editor({
            ajax: "../php/staff.php",
            table: "#example",
            fields: [
            {
                label:  "Zeit",
                name:   "time",
                type:   "datetime",
                format: 'HH:mm:ss',
                opts: {
                    minutesIncrement: 10
                }
            }]
        });

        $('#example').on('click', 'td.time', function(e) {
            editor.inline( this, {
                buttons: { label: 'Speichern', fn: function () { this.submit(); } }
            } );
        });
        
        var table = $('#example').DataTable({
            ajax: "../php/staff.php",
            Processing: true,
            ServerSide: true,
            columns: [
                { 
                    data: "time",
                    className: "time"
                }
            ],
            responsive: true
        });
    });
}(jQuery));

allan

I would suggest updating to Editor 1.7.2 (including the server-side libraries) as the first port of call since there have been a number of bug fixes since 1.6.0.

Allan

karasu

Ok Allan, I will update the Editor and look how many script changes I must do
Thank you

karasu

Dear Allan,
I updated to v1.7.2 and all is fine working without adjustments in the scripts.

But the date is saved as same as yesterday --> "00:20:18".
Which information I can give you to solve this little issue ?
I am out of my ideas....

allan

Can you show me what is being submitted to the server (from your browser's "Network" inspect in the "headers" section) and also a screenshot of the form.

Even better would be a link to the page showing the issue if that is possible.

Allan

karasu

I changed the Database column type to datetime and changed my script as below.
The date is saved but the time not.

PHP

       Field::inst( 'time' )            
            ->validator( 'Validate::dateFormat', 'Y-m-d H:i:s' )
            ->getFormatter( 'Format::date_sql_to_format', 'Y-m-d H:i:s' )
            ->setFormatter( 'Format::date_format_to_sql', 'Y-m-d H:i:s' ),  

JS

var editor; // use a global for the submit and return data rendering in the examples

(function($) {
    $(document).ready(function() {
        editor = new $.fn.dataTable.Editor({
            ajax: '/php/sample.php',
            table: '#table',
            fields: [
            {
                label:  "Anreise",
                name:   "rooms.checkin_guest_time",
                type:   "datetime",
                format: 'YYYY-MM-DD HH:mm:ss',
                opts: {
                    minutesIncrement: 10
                }
            }]
        });

        $('#bookings_dm').on('click', 'tbody td.checkin_guest_time', function(e) {
            editor.inline( this, {
                buttons: { label: 'Speichern', fn: function () { this.submit(); } }
            } );
        });
        
        var table = $('#table').DataTable({
            ajax: '/php/sample.php',
            Processing: true,
            ServerSide: true,
            "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "alle"]],
            "pageLength": 20,
            columns: [
                { 
                    data: "time",
                    className: "time_value"
                }
            ],
            responsive: true
            ]
        });

    });
}(jQuery));

karasu

Hi Allan, sorry I cannot give you a URL.
Did you need this informations attached as screenshots?

allan

Don't use Format::date_sql_to_format (and its counter part) for date and time formatting. It is for date only.

Use the dateTime formatter for date and time formatted strings.

Allan

karasu

Great Allan many thanks.
I completely overlooked the difference.

Last question (because I don't fin it in the documentation):
Is it possible to do this ONLY for TIME VALUE?
e.g. Format HH:MM = 18:15

allan

Yes - for that on the client-side use dateTime and specify only the time part in the format, and likewise on the PHP script use the dateTime formatter with only the time part specified.

Example available here.

Allan

karasu

Hi Allan,

Thank you for your fast and great support.

BR