How to set date format for Kendo UI date column _filter_'s DatePicker

Question

Context:

I have a Kendo UI grid with a Date column. I can successfully set the column's date format, however I can not set the corresponding filter UI's datepicker's date format.

What I've tried so far:

1) Some google results contain the following:

field: "ShippedDate",
title: "Shipped Date",
format: "{0:yyyy/MM/dd}",
filterable: { ui: "datepicker", format: "yyyy/MM/dd" }

This is not working at all. Btw according to Kendo reference docs there is no format property on column's filterable attribute.

2) I've tried to access runtime to the datePicker object to set the format directly in filterMenüInit event. No luck. I can successfully select the picker, but its jQuery.data() is empty. I am using the following selector in the event for the first datepicker:

var $picker = e.container.find(".k-datepicker:eq(0)");

The $picker contains the query, but again $picker.data() is empty according to the debugger

Question:

Now I am stuck. Having the customized format in the datepicker in the filter is mandatory How can I achieve this?

Additional info

You can jumpstart to examine the DOM here:

http://dojo.telerik.com/AGUxa

Answer 1

You can initialize a date picker to input box at filter menu init and set your desired format on it.

function filterMenu(e) {
    if (e.field == "OrderDate") {

        $('input[data-role="datepicker"]').kendoDatePicker({format: "yyyy-MM-dd"});
    }
}

Here is the working demo http://dojo.telerik.com/ucuqO

I hope it will help.