Date or Time - Inline editing

Date or Time - Inline editing

karasukarasu Posts: 27Questions: 2Answers: 0

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

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599
    Answer ✓

    Hi Karasu,

    This forum post may help.

    Cheers,

    Colin

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin
    Answer ✓

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

    Allan

  • karasukarasu Posts: 27Questions: 2Answers: 0

    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));
    
  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    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

  • karasukarasu Posts: 27Questions: 2Answers: 0

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

  • karasukarasu Posts: 27Questions: 2Answers: 0

    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....

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    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

  • karasukarasu Posts: 27Questions: 2Answers: 0

    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));
    
  • karasukarasu Posts: 27Questions: 2Answers: 0

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


  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin
    Answer ✓

    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

  • karasukarasu Posts: 27Questions: 2Answers: 0

    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

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin
    Answer ✓

    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

  • karasukarasu Posts: 27Questions: 2Answers: 0

    Hi Allan,

    Thank you for your fast and great support. :)

    BR

This discussion has been closed.