The below example demonstrates filtering with

• custom datetime format i.e., M dd, yy hh:mm for Order DateTime column
• DD dd MM yy format for Shipped Date column
• Time i.e., hh:mm format for Order Time column

For Shipped Date ( with date format ), we just have to define column.format and grid takes care of the rest.

For Order Date ( with datetime format ), we have used HTML5 datetime control because of lack of support of time formatting in jQueryUI.

For Order Time, we have used HTML5 time control.

For both the Order DateTime and Order Time columns:

• Date time values are required in yy-mm-ddThh:mm:ss or yy-mm-ddThh:mm format in the data. So we convert the dates in default mm/dd/yy format to yy-mm-dd format and append random time values in dataModel.getData callback for this demo purpose. Though remote script is the usual place to supply this formatting.
• Write custom column.format function to supplement jQueryUI date formatting with time formatting. A third party library with time formatting support may also be used.
• Write column.deFormat as counterpart to column format function.
• Implement column.filter.init callback to initialize HTML5 datetime and HTML5 time controls.