Adding a TimePicker to Kendo UI Grid Date Columns

I recently needed to add a TimePicker to a Date column in a Kendo grid, and since the default filter is just a calendar, I was preparing to do my own custom filter UI, when I came across this demo code on the Telerik site. Wait, can I just set the filter UI to a built-in editor? Why yes, yes I can!

Now, if you want to do ‘real’ custom filters, check out Josh’s excellent example over here. But if you just want to change to a different editor, you’re in luck. The code could not be simpler. When declaring your grid column, just set the filterable ui property to the built-in editor of your choice.

field: "TimeData",
title: "Date/Time with Picker",
format: "{0: MM/dd/yyyy hh:mm tt}", 
filterable: {
               ui: "datetimepicker"
             }

Now, the default editor (before our change) for a Date column is a calendar, like this:

But with our new setup, we have the additional option of setting a time:

And, most importantly, the filtering works correctly with the date/time property in our datasource. You can try out the full sample here:

And now I’m done! Thanks Kendo, that was easy!