Problem with timezones with JSDO and Kendo Grid

Hello,

The expected behavior when working with Kendo UI is for the date fields to be handled as JavaScript dates in memory.

When the data is sent to the server, date fields should be serialized as an ISO 8601 formatted string (example: "2015-07-16T16:39:02.789Z").

Internally, the catalog provides the schema to the DataSource and indicates that the field is date.

However, it looks like somehow the date are not being encoded.

What does the value look like when it is read from the server?

Are you updating the date field?

Do you have any formatting options for the column in the Kendo UI Grid?

Perhaps, the configuration is telling the grid to handle the field as string rather than as a date.

Could you try specifying: type: "date" in the column definition?

I hope this helps.

Here is a URL to the Kendo date formatting which might help you:

docs.telerik.com/.../dateformatting

I was using a date in my grid and how to format the field in the field definition for the grid like this:

    { field: "OrderDate", type: "date", format:"{0:MM-dd-yyyy}", width: "110px" }

Hope this helps

The data from the server looks like this to include the date.

"PersonTitle":"Mr","Forenames":"Fred","Surname":"Smith","DOB":"1991-05-20",

The date is part of a group of fields that can be updated in the grid using a grid popup. The error occurs if any of the data is changed, not just the date. However, some records produce the error and others do not, even though the data returned from the server is in the same format each time. The example above is the snippet of JSON from a record where the update fails. The date wasn't changed on the grid popup.

"PersonTitle":"Mr","Forenames":"Fred","Surname":"Jones","DOB":"1991-05-19T23:00:00.000Z"

This has pushed the time back 1 hour. On records that update without successfully, the time is correct, so in this case, it would have been "DOB":"1991-05-20T00:00:00.000Z"

The grid has a param map for the date

$('#grid').kendoGrid({
                // define transports as the class functions
                dataSource: {
                    transport: person.transport,
                    parameterMap: function (options, operation) {
                        if (operation != "read") {
                            var d = new Date(options.DOB);
                            options.DOB = kendo.toString(new Date(d), "0:dd/MM/yyyy");							
                            return options;
                        }
                    },
                    schema: {
                        model: {
                            id: '_id',
                            fields: { DOB: { type: "date", } }
                        }
                    },

The columns are defined as:

editable: 'popup',
toolbar: ['create'],
columns: [
 { field: 'PersonRef', title: 'Person Ref', width: 150, editor: function (element, options) { element.text(options.model.PersonRef) } },
 { field: 'Initials', title: 'Initials', width: 70 },
 { field: 'Forenames', title: 'Forenames', width: 150 },
 { field: 'Surname', title: 'Surname', width: 150 },
 { field: 'Gender', title: 'Gender', width: 80 },
 { field: 'DOB', title: "Date of Birth", type: 'date', width: 100, format: "{0:dd/MM/yyyy}" },
 { field: 'NhiNo', title: 'NI Number', width: 150 },
 { command: ['edit', 'destroy'], title: ' ', width: '250px' }
]

Date picker on the date column:

function dateEditor(container, options) {
  $('<input data-value-field="DOB" data-bind="value:' + options.field + '"/>')
   .appendTo(container)
	.kendoDatePicker({ format: "dd/MM/yyyy" });
}

Hello,

Thank you for the additional information.

I noticed that you are using the old approach to integrate the JSDO with Kendo UI and you are not using the new integration code.

With the new version, the CRUD methods for the transport are built-in and you would not use the parameterMap property.

You may want to update your code to use the new integration code.

Here is a recent post that I made which provides info on the new version:

   community.progress.com/.../67714.aspx

Regarding the issue.

The update to the DOB field seems to be done exclusively by the code that you have in parameterMap.

The code in parameterMap seems to be causing the issue:

   options.DOB = kendo.toString(new Date(d), "0:dd/MM/yyyy");

Please notice that the the AppServer expects a date using ISO8601, so it should actually use a format like "yyyy-MM-dd".

(The new integration code handles dates as JavaScript dates internally and the date is serialized as an ISO 8601 formatted string when sent to the server.)

The Date(dateString) constructor uses UTC, rather than local time.

See: developer.mozilla.org/.../Date

This means that new Date("1991-05-20") returns something like the following:

   Sun May 19 1991 20:00:00 GMT-0400

Notice that it shows 19 as the day.

The call to kendo.toString() just parses the values.

The call to kendo.toString(new Date("1991-05-20"), "dd/MM/yyyy") returns something like the following:

"19/05/1991"

There seems to be another conversion happening which then sends "1991/05/19" as "1991-05-19T23:00:00.000Z", however, the root cause seems to the call to kendo.toString() to parse the date.

Depending on your goal, a possible way to fix the issue would be to use the Date(year, month*, day) constructor.

(*) month is zero based.

Example:

kendo.toString(new Date(1991, 4, 20), "dd/MM/yyyy")

What date datatype are you using for the date in the temp-table definition?

You could use a DATETIME-TZ field in the temp-table definition to ensure that the timezone portion is processed.

Please let me know if this helps.