Date, datetime and time filtering

The below example demonstrates custom filter UI for datetime and time fields.

• Datetime format i.e., mmm dd, yyyy hh:mm AM/PM is used in Order DateTime column
• ddd dd mmm yy format for Shipped Date column
• Time i.e., hh:mm AM/PM 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 DateTime column ( with datetime format ), we use HTML5 datetime control.

For Order Time column, we use HTML5 time control.

For both the Order DateTime and Order Time columns:

• Date time values are required in ISO format in the data. So we convert the dates in default mm/dd/yyyy format to yyyy-mm-dd format and append random time values in dataModel.getData callback for this demo purpose. Though remote script may also supply this formatting.
• Write column.deFormat as counterpart to column format function in Order Time column.
• Implement column.filter.init callback to initialize HTML5 datetime and HTML5 time controls.