Kendo datepicker issue

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?

score 0 · Answer 1 · edited May 23 '17 at 11:57

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;
}

Kendo datepicker issue

1 Answers1