Bootstrap DateTimePicker (2) plug-in edit problem

Karfield

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!

allan

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

Karfield

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?

allan

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

Karfield

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!

Karfield

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

<?php
>
```
?>


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!

allan

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

Allan

allan

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

Karfield

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