[Solved] Grid Edit: Date Format Input Verification

[underscore]

Looking into Kendo UI for a new web service, I found both code & documentation straightforward.

As always date formats make some trouble. While I don't see any problem to produce any required JSON input coming from my application server, I would like to have a notation like dd.mm.yyyy being displayed in my grid.

Of course, I added some '#=kendo.toString(mytime,"dd.mm.yyyy") #' to the column definition but then things start getting weird.

Although dates are being displayed that way, I am not allowed to enter exactly that format  as it does't pass the input verification. Only by try and error, I found that "12/14/2011" is being accepted.

Even more weird, the datepicker inserts "Wed Dec 14 2011 00:00:00 GMT+0100 (CET)" which is also not accepted - can't submit with the toolbar button of the grid.

So, what is the most recommended date format for Kendo UI internal & external date representation?

And where sits the input format checker? Would be glad to know that, as also text fields need some input checks. For obvious reasons some {,: would otherwise crash the JSON parser.

[Nikolay Rusev]

Hi,

You can set format for the columns which will be applied in edit mode. For example:

...
columns: [
        "ProductName",
        { field: "OrderDate", format: "{0:dd.MM.yyyy}"}
    ]
...

For more details please check the follwing jsFiddle:
http://jsfiddle.net/rusev/P5Cjg/2/

Regards,
Nikolay Rusev
the Telerik team

[underscore]

zillion thanks, that saved my day.

[Mukesh]

Hi Nikolay,

I had same problem and it fixed as per your jsfiddle..http://jsfiddle.net/rusev/P5Cjg/2/

I want to have one more further question in that... When i edit any date and clears the date value.. it shows 'null' into datetime editor..
Can i show blank (empty value) instead of 'null' when user clears the field.. and allow user to proceed.. ?

Thanks.
Muksu

[Sean]

I want to use this example to ask another question about dates

if i use this code

var data = [
    {
        ProductID: 1,
        ProductName: "ProductName 1",
        OrderDate: new Date(2011, 1, 1)
    },
    {
        ProductID: 2,
        ProductName: "ProductName 2",
        OrderDate: new Date(1352264400*1000)
    }
];

$("#grid").kendoGrid({
    dataSource: {
        data: data,
        batch: true,
        pageSize: 30,
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { validation: { required: true } },
                    OrderDate: { type: "date" }
                }
            }
        }
    },
    editable: true,
    toolbar: ["create", "save", "cancel"],
    columns: [
        "ProductName",
        { field: "OrderDate", format: "{0:dd.MM.yyyy}"}
    ]
});​

the second date is correct, today 7/11/2012

but if i use that as the source for the data (php exports mysql data as json) it shows up as a date from year 1333