Kendo Grid custom filter on date - asp.net-mvc

Question

I have seen a couple of code examples of how to do this, but none in the format I'm looking for. I tried to convert them myself, but without success. What I'm trying to do is to create a custom row filter that will give you an x-amount of options that can be used on a date.
columns.Bound(cc => cc.StartDate).Width(160)
.HeaderHtmlAttributes(new { title = "startdate") })
.Title("startdate"))
.Filterable(ftb => ftb.Extra(false)
.Operators(op => op.ForDate(d => d
.IsEqualTo("At date")
.IsLessThan("Before date")
.IsGreaterThan("After date"))));
In the code above I'm trying to use filter options so a user can chose to filter events before, at and after a certain date. It would be nice if these options would actualy be shown and even better if a user could use the kendo datepicker.
So my question is: What am I doing wrong that I'm not seeing the correct options and how do i get the date-picker into the filter?

Answer 1

You need to have a column datatype as datetime .
If you're using MVC, in your model, you add DataType.Date above your DatePicker property in case you want only datepicker and not datetimepicker as below:
[DataType(DataType.Date)]
public DateTime StartDate{ get; set; }
Note: add reference to System.ComponentModel.DataAnnotations if its not included in your header.
Then specify in filtrable that UI will be datetime picker
filterable: {
ui: "datetimepicker"
}
OR
columns.Bound(c => c.StartDate).ClientTemplate("#= kendo.toString(kendo.parseDate(StartDate), 'MM/dd/yyyy HH:mm:ss') #")
.Filterable(ftb => ftb.Cell(cell => cell.Template("DateTimeFilter")));
here is a sample code you can refer.In this smple there is column for Birthdate that you can refer.
Demo - sample
In your case it would be like
columns.Bound(cc => cc.StartDate).Width(160)
.HeaderHtmlAttributes(new { title = "startdate") })
.Title("startdate"))
.Filterable(ftb => ftb.Extra(false)
.Cell(cell => cell.Template("DateTimeFilter"))
.Operators(op => op.ForDate(d => d
.IsEqualTo("At date")
.IsLessThan("Before date")
.IsGreaterThan("After date"))));
Hope it helps you.