# 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. */,
    			...
    		},{
    			...
    		}]
    	});
    });