Date type is not showing correct date when edited

chrisrbloom · June 2015

Hello - I just purchased your editor product.

I'm populating a datatables.net table from a JSON object which is pulled from a Sharepoint site via a REST request.

I am attempting to use the inline editor to edit my date field. The date value is 06/01/2015 (june 1, 2015).

In the editor declaration, when I set the type to "text", the textbox shows the correct date as shown in the table for editing.

However, when I set the type to "date", the calendar widget pops up, but shows Monday, Dec 7, 2020.

I do have my name and data columns set to the correct field name. Is there something I'm missing?

chrisrbloom · June 2015

After some more research, I see that neither the JQuery UI datepicker NOR the HTML5 date picker are seemingly able to pick up the date from my date column.

In the date column, I'm formatting the date as "MM/DD/YYYY" from the "moment.js" library, HOWEVER, I believe the actual data that's being picked up from the table is different.

When I attempt to set the editor type of the date field to "text", then edit the field this is what I get:

Shown on table: 06/10/2015
Text Box when Edited: 2015-06-10T05:00:00Z

I believe the problem is somehow related to the way the editor is parsing the date that I have and can't figure it out, so the JQueryUI version, it's just giving me a date way out in the future...on the HTML5 version, it's not giving me anything at all ("mm/dd/yy").

Is there a way for me to "help" the editor get a better date - one that it can understand?

My code is shown below. I haven't yet hooked up the CRUD methods...just trying to get the form to work first.

// Set up the Editor for the shipments table
            editor = new $.fn.dataTable.Editor( {
                ajax: {
                    create: {
                        type: 'POST',
                        url:  '../php/rest/create.php'
                    },
                    edit: {
                        type: 'PUT',
                        url:  '../php/rest/edit.php?id=_id_'
                    },
                    remove: {
                        type: 'DELETE',
                        url:  '../php/rest/remove.php?id=_id_'
                    }
                },
                table: "#DELIVERIES",
                fields: [ 
                    
                    {
                        type: "date",
                        label: "Arrival Date:",
                        name: "ArrivalDate",
                        dateFormat: "mm/dd/yy"
                    }, 
                    {
                        label: "Driver:",
                        name: "DriverName",
                        data: "DriverName",
                    },
                    {
                        label: "Location:",
                        name: "GoingTo",
                        data: "GoingTo"
                    }
                ]
            } );
            
            $('#DELIVERIES').on( 'click', 'tbody td', function (e) {
                if($(this).index()==1 || $(this).index()==2 || $(this).index()==5){
                    editor.inline( this );
                };
            } ); 
            
            
            // Get our REST data
            var calldata = $.ajax({
                url: jsonURL,
                type: "GET",
                dataType: "json",
                headers: {
                    Accept: "application/json;odata=verbose"
                }
            });
            
            // When complete, now build and configure our datatables.net display
            calldata.done(function (data,textStatus, jqXHR){
                // Place the data in the HTML table with the ID of #DELIVERIES (see html page to view markup)
                $('#DELIVERIES').dataTable({
                    "destroy": true,
                    "processing": true,
                    "data": data.d.results,
                    "paging": true,
                    "pageLength": 50,
                    "ordering": true,
                    "pagingType": "full_numbers",
                    "order": [1, "desc"],
                    "columnDefs": [     
                        {   "data": null,
                            "defaultContent": "--",
                            "targets": [3,4,5]
                        },
                        {   "targets": 0, 
                            "orderable": false }                        
                    ],
                    
                    "columns": [
                        
                        { "data": "Id",
                          "className": "dt-center",
                          "width": "1px",
                          "render": 
                            function( data, type, row, meta){
                                return ""
                            }
                        },
                        { "data": "ArrivalDate",
                          "width": "75px",
                          "className": "dt-center",                       
                          "render": 
                            function( data, type, row, meta){
                                var ThisDate = moment(new Date(data)).format("MM/DD/YYYY");
                                //var DateToReturn = moment(ThisDate).format("MM/DD/YYYY");
                                //var LinkURL = "../../Pages/Deliveries_By_Day.aspx?DateToShow=" + DateToReturn;
                                //var LinkToReturn = "<a href='"+LinkURL+"' target='_blank' title='Open Delivery List in New Window'>"+DateToReturn+"</a>"
                                //return LinkToReturn
                                return ThisDate
                            }
                        },
                        { "data": "DriverName",
                          "className": "dt-center",
                          "width": "75px"
                        },
                          
                        { "data": "JobNumber.Title",
                          "className": "dt-center",
                          "width": "75px"
                        },
                          
                        { "data": "Title",
                          "className": "dt-left",
                          "render": 
                            function( data, type, row, mets){
                                var ThisID = row.ID;
                                var EditFormURL = "../../Lists/SHIPPING%20LOADS/EditFormNew.aspx?ID="+ThisID+"&amp;IsDlg=1";
                                var LinkDesc = data;
                                var LinkHTML = "<a href='#' onclick=openInDialog(800,600,true,true,true,'"+EditFormURL+"')>"+LinkDesc+"</a>";
                                
                                return LinkHTML 
                            }
                        },
                        
                        { "data": "GoingTo",
                          "className": "dt-center",
                          "width": "100px"
                        }
                    ]
                  });
            });
            calldata.fail(function (jqXHR,textStatus,errorThrown){
                alert("Error retrieving Shipments: " + jqXHR.responseText);
            });
    };

pingcrosby · June 2015

Hi i noticed that the editor date format differs from the moment date format - is this by design?

allan · June 2015

When I attempt to set the editor type of the date field to "text", then edit the field this is what I get:
Shown on table: 06/10/2015 Text Box when Edited: 2015-06-10T05:00:00Z

So what appears to be happening here is that the actual data in the JSON data feed is in IS8601 format (e.g. 2015-06-10T05:00:00Z).

When you use the columns.render option with Moment to transform the data for the column display, it effects only the data that DataTables displayed - not the underlying data.

Frustratingly it appears that jQuery UI doesn't accept much other than the format specified or a Javascript Date object (I can't understand why they wouldn't also accept IS8601 as a "wire format").

To help address this, the Editor libraries provide get and set formatters so that the client-side will only need to handle one date format.

Are you using the Editor libraries, or do you have the ability to change the date format in the JSON data in some other fashion?

Thanks,
Allan

Date type is not showing correct date when edited

Date type is not showing correct date when edited

Answers

Howdy, Stranger!

Categories

DataTables

Date type is not showing correct date when edited

Date type is not showing correct date when edited

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables