Kendo datepicker issue - kendo-ui

Question

I'm using kendo UI for my solution like in code below
<div id="myGrid" data-role="grid"
data-bind="source: viewModel"
data-sortable="true"
data-pageable="true"
data-filterable="true"
data-resizable="true"
data-editable = "incell"
data-selectable="true"
data-columns='[
{ field: "Name", title: "Name" },
{ field: "StartDate", title: "Start date", format: "{0:dd/MM/yyyy}"},
{ field: "EndDate", title: "End date", format: "{0:dd/MM/yyyy}"},
{ field: "ClosingDate", title: "Closing date", format: "{0:dd/MM/yyyy}"}]'
data-toolbar ='[{name:"create"},
{name:"save"}]'>
</div>
Fields in viewModel have "date" type.
Let's say I'm choosing Start date as 16/05/2014 and after that I'm saving changes. But after updating i see that Start date is 15/05/2014. And it happens with each date cell in grid.
Why date is less than i was chose.
Is there a way to solve this problem?

Answer 1

Refer to the answer given here: javascript Date.parse
I assume that the issue is caused by the browser you are using. I had a lot of trouble with date formatting in IE. I found that creating dates in Chrome or Firefox gave me exactly what I wanted, but in IE any format other than MM/dd/yyyy when creating or parsing a date gave the incorrect date in the Date object once parsed.
My suggestion is the same as the answer I linked to: instead of using the 'format' field of the column, use a template and parse it yourself.
data-columns='[
{ field: "Name", title: "Name" },
{ field: "StartDate", title: "Start date", template: "# parseDate(StartDate) #"},
{ field: "EndDate", title: "End date", template: "# parseDate(EndDate) #"},
{ field: "ClosingDate", title: "Closing date", template: "# parseDate(ClosingDate) #"]'
Then have your parseDate(date) function:
function parseDate(date) {
if (date == null) return '';
//using the .slice() method keeps the leading '0' if MM or dd is single digit
var rtn = ('0' + date.Date()).slice(-2) + '/' +
('0 + (date.Month() + 1)).slice(-2) + '/' +
date.FullYear();
return rtn;
}