datatables.net-datetime/examples/integration/datatables.xml

DateTime picker for DataTables.net

<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html" table-class="display nowrap" order="2">

<css lib="datatables datetime"/>

<js lib="jquery datatables moment datetime">
<![CDATA[
var minDate, maxDate;

// Custom filtering function which will search data in column four between two values
DataTable.ext.search.push(function (settings, data, dataIndex) {
	var min = minDate.val();
	var max = maxDate.val();
	var date = new Date(data[4]);

	if (
		(min === null && max === null) ||
		(min === null && date <= max) ||
		(min <= date && max === null) ||
		(min <= date && date <= max)
	) {
		return true;
	}
	return false;
});

// Create date inputs
minDate = new DateTime('#min', {
	format: 'MMMM Do YYYY'
});
maxDate = new DateTime('#max', {
	format: 'MMMM Do YYYY'
});

// DataTables initialisation
var table = $('#example').DataTable();

// Refilter the table
$('#min, #max').on('change', function () {
	table.draw();
});

]]>
</js>

<js-vanilla>
<![CDATA[
let minDate, maxDate;

// Custom filtering function which will search data in column four between two values
DataTable.ext.search.push(function (settings, data, dataIndex) {
	let min = minDate.val();
	let max = maxDate.val();
	let date = new Date(data[4]);

	if (
		(min === null && max === null) ||
		(min === null && date <= max) ||
		(min <= date && max === null) ||
		(min <= date && date <= max)
	) {
		return true;
	}
	return false;
});

// Create date inputs
minDate = new DateTime('#min', {
	format: 'MMMM Do YYYY'
});
maxDate = new DateTime('#max', {
	format: 'MMMM Do YYYY'
});

// DataTables initialisation
let table = new DataTable('#example');

// Refilter the table
document.querySelectorAll('#min, #max').forEach((el) => {
	el.addEventListener('change', () => table.draw());
});

]]>
</js-vanilla>

<title lib="DateTime">DataTables date range filter</title>

<info><![CDATA[

This example shows the DateTime picker being used to filter a DataTable. The example is [the same as the DataTables number range filter](https://datatables.net/examples/plug-ins/range_filtering.html), but operating on the _Start date_ column rather than _Age_.

In this example we use `de-api val()` to get a `Date` object from the input element which can then be easily compared to the value from the table's rows in [a DataTables search function](https://datatables.net/manual/plug-ins/search).

]]></info>

<demo-html>
	<table border="0" cellspacing="5" cellpadding="5">
		<tr>
			<td>Minimum date:</td>
			<td><input type="text" id="min" name="min" /></td>
		</tr>
		<tr>
			<td>Maximum date:</td>
			<td><input type="text" id="max" name="max" /></td>
		</tr>
	</table>
</demo-html>

</dt-example>