Date Columns

Options, how to use, and basic examples for date columns.

Dates are a common data type displayed in tables so we wanted to provide a default way to handle this rather unwieldy JavaScript object. Rather than writing an entire date parsing and formatting library we decided to use moment.js to provide this functionality.

Required files

If you need to use the date column type you must include moment.js in your page.

 Options

Apart from the default column options using the date type allows you to use the below additional options.

Column options

 

formatString string

The format used to display and parse dates from cells (td's).

"MM-DD-YYYY"

To supply this option through data attributes you must specify the attribute on the cell element.

<table>
	<thead>
		<tr>
			<th data-type="date" data-format-string="Do MMMM YYYY">...</th>
			...
		</tr>
	</thead>
	...
</table>

The below shows how to supply this value directly through the options.

jQuery(function($){
	$('.table').footable({
		"columns": [{
			"type": "date",
			"formatString": "Do MMMM YYYY"
		},{
			...
		}]
	});
});

Examples

When supplying row data that contains dates the cell values can be supplied as either a moment.js wrapper, a JavaScript date object, a numeric tick value or a string that can be parsed using the formatString option.

The below shows the simplest way a date column could be implemented however this only works as the cell value matches the default value of the formatString. 

<table>
	<thead>
		<tr>
			<th data-type="date">...</th>
			...
		</tr>
	</thead>
	<tr>
		<td>12/1/2000</td>
	</tr>
	...
</table>

The formatString option must match the format of the cells contents.

<table>
	<thead>
		<tr>
			<th data-type="date" data-format-string="Do MMMM YYYY">...</th>
			...
		</tr>
	</thead>
	<tr>
		<td>1st December 2000</td>
	</tr>
	...
</table>

To be able to change how a date is displayed when supplied as a ticks value use the cells data-value attribute to supply the value and the column's formatString option to specify how it is displayed. 

<table>
	<thead>
		<tr>
			<th data-type="date" data-format-string="Do MMMM YYYY">...</th>
			...
		</tr>
	</thead>
	<tr>
		<td data-value="975683133000"><!-- 1st December 2000 --></td>
	</tr>
	...
</table>

Implementing a date column through the options requires the column's type option be set to "date" and that the name of the column matches a date property in the row data. 

jQuery(function($){
	$('.table').footable({
		"columns": [{
			"type": "date",
			"name": "started",
			...
		},{
			...
		}],
		"rows": [{
			"started": /* Can be a moment.js wrapper, a date object, a ticks value or a string that can be parsed into a date using the formatString option. */,
			...
		},{
			...
		}]
	});
});