Home Wiki
JQuery DataTable Column Filter - Date Range filters

Preamble

DataTables Column Filter add-on enables you to add date range filters where you can filter columns by start and end dates.

Live example

Company name Date Created Date Updated
Company name Date Created Date Updated
Emkay Entertainments 28/05/2011 25/08/2011 00:00:00
The Empire 16/06/2011 10/07/2011 00:00:00
Asadul Ltd 13/07/2011 12/09/2011 00:00:00
Gargamel ltd 15/05/2011 15/05/2011 00:00:00
Ashley Mark 15/07/2011 25/08/2011 00:00:00
MuchMoreMusic Studios 02/07/2011 24/09/2011 00:00:00
Victoria Music Ltd 21/07/2011 19/08/2011 00:00:00
Abacus Agent 08/06/2011 23/08/2011 00:00:00
Atomic 09/06/2011 04/07/2011 00:00:00
Pyramid Posters 30/07/2011 14/10/2011 00:00:00
Kingston Smith Ltd 06/08/2011 04/09/2011 00:00:00
Garrett Axford PR 06/07/2011 28/09/2011 00:00:00
Derek Boulton Management 12/08/2011 22/09/2011 00:00:00
(TCM) 15/05/2011 00:00:00
Billy Russell Management 14/08/2011 14/10/2011 00:00:00
Stage Audio Services 22/07/2011 15/08/2011 00:00:00
Windsong International 21/06/2011 18/09/2011 00:00:00
Vivante Music Ltd 19/05/2011 14/07/2011 00:00:00
Way to Blue 29/07/2011 23/08/2011 00:00:00
Glasgow City Halls 10/07/2011 14/10/2011 00:00:00
The List 07/07/2011 14/09/2011 00:00:00
Wilkinson Turner King 26/07/2011 08/09/2011 00:00:00
GSC Solicitors 03/06/2011 24/06/2011 00:00:00
Vanessa Music Co 15/05/2011 15/05/2011 00:00:00
Regent Records 05/06/2011 25/08/2011 00:00:00
BBC Radio Lancashire 11/08/2011 14/10/2011 00:00:00
The Citadel Arts Centre 22/05/2011 10/07/2011 00:00:00
Villa Audio Ltd 07/08/2011 12/09/2011 00:00:00
Astra travel 09/06/2011 04/07/2011 00:00:00
Idle Eyes Printshop 20/06/2011 06/07/2011 00:00:00
Miggins Music (UK) 07/06/2011 16/06/2011 00:00:00
Magic 999 15/08/2011 19/08/2011 00:00:00
Delga Group 03/07/2011 04/07/2011 00:00:00
Zane Music 15/05/2011 15/05/2011 00:00:00
Universal Music 05/07/2011 06/07/2011 00:00:00
Gotham Records 23/05/2011 27/05/2011 00:00:00
Timbuktu Music Ltd 31/07/2011 09/08/2011 00:00:00
Online Music 18/07/2011 03/08/2011 00:00:00
Irish Music Magazine 29/07/2011 23/08/2011 00:00:00
Savoy Records 31/05/2011 06/07/2011 00:00:00
Temple Studios 16/08/2011 04/10/2011 00:00:00
Gravity Shack Studio 27/05/2011 30/07/2011 00:00:00
Dovehouse Records 02/08/2011 22/10/2011 00:00:00
Citysounds Ltd 15/05/2011 15/05/2011 00:00:00
Revolver Music Publishing 04/08/2011 25/08/2011 00:00:00
Jug Of Ale 12/06/2011 26/07/2011 00:00:00
Isles FM 103 01/07/2011 08/09/2011 00:00:00
Headscope 28/06/2011 02/10/2011 00:00:00
Universal Music Ireland 09/06/2011 04/07/2011 00:00:00
Zander Exports 19/08/2011 14/10/2011 00:00:00
Midem (UK) 17/07/2011 14/10/2011 00:00:00
La Rocka Studios 16/06/2011 10/07/2011 00:00:00
Warner Home DVD 24/05/2011 24/07/2011 00:00:00
Music Room 15/05/2011 15/05/2011 00:00:00
Blue Planet 26/05/2011 06/07/2011 00:00:00
Dream 107.7FM 02/07/2011 24/09/2011 00:00:00
Moneypenny Agency 01/06/2011 30/06/2011 00:00:00
Artsun 08/06/2011 23/08/2011 00:00:00
Clyde 2 29/07/2011 23/08/2011 00:00:00
9PR 30/07/2011 14/10/2011 00:00:00
River Studio's 17/06/2011 16/07/2011 00:00:00
Start Entertainments Ltd 06/07/2011 28/09/2011 00:00:00
Vinyl Tap Mail Order Music 23/06/2011 03/08/2011 00:00:00
Passion Music 15/05/2011 15/05/2011 00:00:00
SuperVision Management 25/06/2011 25/08/2011 00:00:00
Lite FM 22/07/2011 15/08/2011 00:00:00
ISIS Duplicating Company 10/08/2011 07/11/2011 00:00:00
Vanderbeek & Imrie Ltd 19/05/2011 14/07/2011 00:00:00
Glamorgan University 09/06/2011 04/07/2011 00:00:00
Web User 10/07/2011 14/10/2011 00:00:00
Farnborough Recreation Centre 18/05/2011 26/07/2011 00:00:00
Robert Owens 26/07/2011 08/09/2011 00:00:00
Magick Eye Records 23/07/2011 13/08/2011 00:00:00
Alexandra Theatre 15/05/2011 15/05/2011 00:00:00
Keda Records 25/07/2011 14/10/2011 00:00:00
Independiente Ltd 11/08/2011 14/10/2011 00:00:00
Shurwood Management 11/07/2011 29/08/2011 00:00:00
Fury Records 07/08/2011 12/09/2011 00:00:00
Northumbria University 29/07/2011 23/08/2011 00:00:00
Pop Muzik 20/06/2011 06/07/2011 00:00:00
Jonsongs Music 27/07/2011 05/08/2011 00:00:00
Hermana PR 15/08/2011 19/08/2011 00:00:00
Sugarcane Music 22/08/2011 23/08/2011 00:00:00
JFM Records 15/05/2011 15/05/2011 00:00:00
Black Market Records 16/05/2011 17/05/2011 00:00:00
Float Your Boat Productions 23/05/2011 27/05/2011 00:00:00
Creation Management 11/06/2011 20/06/2011 00:00:00
Bryter Music 18/07/2011 03/08/2011 00:00:00
The Headline Agency 09/06/2011 04/07/2011 00:00:00
MP Promotions 31/05/2011 06/07/2011 00:00:00
Modo Production Ltd 27/06/2011 15/08/2011 00:00:00
Nomadic Music 27/05/2011 30/07/2011 00:00:00
Reverb Records Ltd 13/06/2011 02/09/2011 00:00:00
SIBC 15/05/2011 15/05/2011 00:00:00
Marken Time Critical Express 15/06/2011 06/07/2011 00:00:00
102.2 Smooth FM 12/06/2011 26/07/2011 00:00:00
Chesterfield Arts Centre 20/08/2011 28/10/2011 00:00:00
The National Indoor Arena 28/06/2011 02/10/2011 00:00:00
Salisbury City Hall 29/07/2011 23/08/2011 00:00:00
Minder Music 19/08/2011 14/10/2011 00:00:00
Company name Date Created Date Updated

Initialization code

In the initialization code you should place "date-range" as type of the column filter as shown below:

		
$(document).ready(function(){
     $('#example').dataTable()
		  .columnFilter({ 	sPlaceHolder: "head:before",
					aoColumns: [ 	{ type: "text" },
				    	 		{ type: "date-range" },
                                    			{ type: "date-range" }
						]

		});
});
	

In this example is also placed filters before header row using the sPlaceHolder parameter. In this case you will need to add duplicate heading row after the first heading row in the THEAD tag. In this row will be injected filter controls and it will ba placed before heading row that is used by DataTables.

Note that date format of the cells must match the date format of the calendar. Filter uses Jquery Date picker UI regional setting and you can change this in the following code:

                $.datepicker.regional[""].dateFormat = 'dd/mm/yy';
                $.datepicker.setDefaults($.datepicker.regional['']);

Other examples