Bootstrap DateTimePicker (2) plug-in edit problem

Bootstrap DateTimePicker (2) plug-in edit problem

KarfieldKarfield Posts: 8Questions: 2Answers: 0
edited May 2015 in Plug-ins

Datatables Debugger data: http://debug.datatables.net/onuxow

I am using Boostrap DateTimePicker (2) plug-in to have one date input in Editors bubble-editing mode. The versions of the external libraries used with the plug-in are bootstrap-datetimepicker 3.0.0 and Moment JS 2.5.1.

Link to Boostrap-datetimepicker v3.0.0:
https://github.com/Eonasdan/bootstrap-datetimepicker/blob/v3.0.0/src/js/bootstrap-datetimepicker.js

While displaying the date in 'Y-m-d' format on the client-side the DateTimePicker is working fine when editing the table (I am using mm.dd.yyyy format for the DateTimepicker). Edit field displays the date chosen for the column in the date input in correct format. So in general everything is working fine, but the user must see the information in the d.m.Y format at all times.

However, if I use d.m.Y formatting to display the data on the client-side the DateTimePicker does not recognize the format and displays blank date field. I am able to choose a new date from the input and save it to database, but existing date value being replaced by a blank value in editing window really ruins the user experience.

Problem in a nut shell:

Date displayed in table in format: 2015-06-05 -> Works fine in Edit window and shows as 06.05.2015.

Date displayed in table in format: 06.05.2015 -> Edit window displays blank date input.

Datetime options:

"opts": {
                    language: 'en', 
                    format: 'DD.MM.YYYY',                   
                    pickTime: false,
                    daysOfWeekDisabled: [0,6]
}

Editor date field:

Field::inst( 'test_hours.Date' )
        ->validator( 'Validate::dateFormat', array(
                "format"  => Format::DATE_FIN,
                "message" => "Please enter a date in the format dd.mm.yyyy"
            ) ) 
            ->getFormatter( 'Format::date_sql_to_format', 'd.m.Y')          
            ->setFormatter( 'Format::date_format_to_sql', 'd.m.Y'), 

I think the PHP Format and validation functions are working fine, but that the DateTimePicker cannot read d.m.Y format for some reason.

Sorry for the messy question and thanks in advance!

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    Hi,

    It looks like v4 of the Date Time Picker library used here has removed a method that the Editor plug-in was using. From their release notes:

    set/getDate() is now replaced with an overloaded date() function. Use it without a parameter to get the currently set date or with a parameter to set the date.

    The fix, fortunately, is relatively simple. In the plug-in code, find the set method and replace it with:

        "set": function ( conf, val ) {
            var picker = conf._input.data("DateTimePicker");
    
            if ( picker.setDate ) {
                picker.setDate( val );
            }
            else {
                picker.date( val );
            }
        },
    

    I'll update the plug-in on the site shortly.

    Regards,
    Allan

  • KarfieldKarfield Posts: 8Questions: 2Answers: 0
    edited May 2015

    Thanks, but I am using the V3 DateTimePicker that still has the setDate function. I chose that one for the reason it has the extra options I needed while keeping the basic functionality the same as the 2.1.3 version in the example. If using => 4.0.0 language has to be changed to locale also.

    Here is a picture to clarify my problem:
    http://i.imgur.com/mz11aMR.png

    From there you can see that the setDate is clearly working, but there is some parsing error when the Table is in d.m.Y format I think?

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    Hi,

    Sorry to hear that didn't help - I got confused with the versions!

    Are you able to give me a link to the page you are working on so I can debug it directly. I've not been able to recreate the issue locally unfortunately.

    Thanks,
    Allan

  • KarfieldKarfield Posts: 8Questions: 2Answers: 0

    Hey,

    Unfortunately I can't give a direct link to the project I'm working on, since the database contains information that I am not allowed to share.

    I'll see if I'm able to recreate the problem in a smaller scale that I can share.

    Thanks!

  • KarfieldKarfield Posts: 8Questions: 2Answers: 0
    edited May 2015

    Looks I don't have a easy access to webserver with jQuery installed, but here is the simplified code that still has the same issue:

    Javascript:

    (function($){   
    $(document).ready(function() {
        var editor = new $.fn.dataTable.Editor( {           
            "ajax": "php/test_problem.php",     
            "table": "#test_hours",
            "fields": [{    
                    "label": "P\u00e4iv\u00e4m\u00e4\u00e4r\u00e4",
                    "name": "test_hours.Date",              
                    "type": "datetime",                             
                    "opts": {
                        language: 'fi',
                        format: 'DD.MM.YYYY',
                        pickTime: false,
                        daysOfWeekDisabled: [0,6]                                   
                    }                   
            }]      
        } );
        
        var table = $('#test_hours').DataTable( {       
            "paging":   false,
            "searching": false,             
            "dom": "Tfrtip",
            "ajax": "php/test_problem.php",
            "columns": [
                {
                    "data": "test_hours.Employee"
                },
                {
                    "data": "test_hours.Date"
                }
            ],
            "tableTools": {
                "sRowSelect": "os",
                "aButtons": [
                    { "sExtends": "editor_create", "editor": editor },
                    { "sExtends": "editor_edit",   "editor": editor },
                    { "sExtends": "editor_remove", "editor": editor },
                    {
                        sExtends: "collection",
                        sButtonText: "Save",
                        sButtonClass: "save-collection",
                        aButtons: [ 'copy', 'csv', 'xls', 'pdf' ]
                    }                
                ]
            }
        } );
    } );
    }(jQuery));
    

    HTML:

    <table cellpadding="0" cellspacing="0" border="0" class="display" id="test_hours" width="100%">
                <thead>             
                    <th>Employee</th>
                    <th>Date</th>                       
                </thead>                
    </table>
    

    Working PHP code with the date displayed in ISO_8601 format on the client side. Strangely the Picker can format this date to DD.MM.YYYY for the edit box:

    <?php
    include( "DataTables.php" );
    $test = 'test';
    
    use
        DataTables\Editor,
        DataTables\Editor\Field,
        DataTables\Editor\Format,
        DataTables\Editor\Join,
        DataTables\Editor\Upload,
        DataTables\Editor\Validate;     
    
    $editor = DataTables\Editor::inst( $db, 'test_hours', 'id');
    $editor->fields(
            Field::inst( 'test_hours.Date' ),       
            Field::inst( 'test_hours.Employee' )
            ->setValue( $test ),
            Field::inst( 'test_hours.Project' ),            
            Field::inst( 'test_hours.Worktype' ),
            Field::inst( 'test_hours.Hour' ),
            Field::inst( 'test_hours.Description' )
        );
        
    
    $editor->process( $_POST ); 
    $editor->json();
    ?>
    

    And the code used to format the date shown to d.m.Y for the clientside, which breaks the picker in Edit:

    ->validator( 'Validate::dateFormat', array(
                    "format"  => Format::DATE_FIN,
                    "message" => "Please enter a date in the format dd.mm.yyyy"
                ) ) 
                ->getFormatter( 'Format::date_sql_to_format', 'd.m.Y')          
                ->setFormatter( 'Format::date_format_to_sql', 'd.m.Y'), 
    

    DATE_FIN is constant in Format.php as DATE_FIN = "d.m.Y";

    DateTimePicker 3.0.0 and Moment 2.5.1

    Thank you so much for your help!

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    Thanks - let me get back to you when I've had a chance to try this out locally.

    Allan

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    Answer ✓

    It appears to be a bug in v3.0.0 of the DateTime Picker library. If you update to 3.0.1 (or 3.0.3 which is the newest of the 3.0 series, there is also 3.1.3 you might want to consider) it should work okay (that how it has gone in my local tests anyway).

    You will also need to update Moment from 2.5.1 (2.10.2 is the current release) as 3.0.1 appears to require a new Moment function.

    Allan

  • KarfieldKarfield Posts: 8Questions: 2Answers: 0
    edited May 2015

    This fixed the problem, thank you so much! I don't know where I would be without you.

This discussion has been closed.