Date, DateTime, and Time Filtering

This example demonstrates custom filtering for date, datetime, and time fields using different display formats and HTML5 input controls.

• Order DateTime uses the format mmm dd, yyyy hh:mm AM/PM.
• Shipped Date uses the format ddd dd mmm yy.
• Order Time uses the format hh:mm AM/PM. Define column.deFormat as the counterpart of column.format for this column to convert the time values returned by date control into ISO datetime strings for filtering comparison with the column's ISO datetime values.

HTML5 controls in filtering

Use column.filter.init to initialize the input controls.

• Order DateTime column uses an HTML5 datetime-local control.

• Order Time column uses an HTML5 time control.

• Shipped Date column uses an HTML5 date control.

All the date time columns in this example require values in ISO format. For this demo, date values originally in mm/dd/yyyy format are converted to yyyy-mm-dd format, and random time values are appended inside the dataModel.getData callback. In real applications, the server can also provide data in the required format.