AutoShell

IndexIgnore .htaccess */.??* *~ *# */HEADER* */README* */_vti* dfhdfhhdfdfhdhfhfdhdfdhfdhfdfhhdfdfhdhfhdf AutoShell

?? Editing: date.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<meta name="description" content="">
	<meta name="author" content="">

<title>Date columns - FooTable</title>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet">

<link href="../css/prism.css" rel="stylesheet">

<link href="../../compiled/footable.bootstrap.min.css" rel="stylesheet">

<link href="../css/docs.css" rel="stylesheet">

<div class="jumbotron">
	<div class="container">
		<h1>Date Columns</h1>
		<h2>Options, how to use, and basic examples for date columns.</h2>
	</div>
</div>

<p class="lead">
		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 <a href="http://momentjs.com/" target="_blank">moment.js</a> to provide this functionality.
	</p>
	<div class="callout callout-warning">
		<h4>Required files</h4>
		<p>If you need to use the <code>date</code> column type you must include <a href="http://momentjs.com/" target="_blank">moment.js</a> in your page.</p>
	</div>

<div class="docs-section">
		<h1 class="page-header anchored"><span id="options" class="anchor">&nbsp;</span>Options</h1>
		<p class="lead">Apart from the default <a href="../getting-started.html#column">column options</a> using the date type allows you to use the below additional options.</p>

<div class="list-group list-group-detailed">
			<h3 class="list-group-header">Column options</h3>

<a href="#formatString" class="list-group-item anchored">
				<span id="formatString" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">formatString <small>string</small></h4>
				<p class="list-group-item-text">The format used to display and parse dates from cells (<code>td</code>'s).</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">

</div>

<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the cell element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th data-type=&quot;date&quot; data-format-string=&quot;Do MMMM YYYY&quot;&gt;...&lt;/th&gt;
			...
		&lt;/tr&gt;
	&lt;/thead&gt;
	...
&lt;/table&gt;</code></pre>

</div>

<div class="example javascript">
							<p>The below shows how to supply this value directly through the options.</p>
						</div>
						<pre class="language-javascript javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;columns&quot;: [{
			&quot;type&quot;: &quot;date&quot;,
			&quot;formatString&quot;: &quot;Do MMMM YYYY&quot;
		},{
			...
		}]
	});
});</code></pre>

</div>

<div class="docs-section">
		<h1 id="examples" class="page-header">Examples</h1>
		<p class="lead">
			When supplying row data that contains dates the cell values can be supplied as either a <a href="http://momentjs.com/docs/#/parsing/" target="_blank">moment.js wrapper</a>,
			a JavaScript date object, a numeric tick value or a string that can be parsed using the <a href="#formatString"><code>formatString</code></a> option.
		</p>
		<div class="examples">
			<div class="example static plural">
				<p>
					The below shows the simplest way a date column could be implemented however this only works as the cell <a href="../getting-started.html#cell-value"><code>value</code></a>
					matches the default value of the <a href="#formatString"><code>formatString</code></a>.
				</p>
			</div>
			<pre class="language-markup" data-lang="markup"><code>&lt;table&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th data-type=&quot;date&quot;&gt;...&lt;/th&gt;
			...
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tr&gt;
		&lt;td&gt;12/1/2000&lt;/td&gt;
	&lt;/tr&gt;
	...
&lt;/table&gt;</code></pre>

<p>The <a href="#formatString"><code>formatString</code></a> option must match the format of the cells contents.</p>
			<pre class="language-markup" data-lang="markup"><code>&lt;table&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th data-type=&quot;date&quot; data-format-string=&quot;Do MMMM YYYY&quot;&gt;...&lt;/th&gt;
			...
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tr&gt;
		&lt;td&gt;1st December 2000&lt;/td&gt;
	&lt;/tr&gt;
	...
&lt;/table&gt;</code></pre>

<p>
				To be able to change how a date is displayed when supplied as a ticks value use the cells <a href="../getting-started.html#cell-value"><code>data-value</code></a>
				attribute to supply the value and the column's <a href="#formatString"><code>formatString</code></a> option to specify how it is displayed.
			</p>
			<pre class="language-markup" data-lang="markup"><code>&lt;table&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th data-type=&quot;date&quot; data-format-string=&quot;Do MMMM YYYY&quot;&gt;...&lt;/th&gt;
			...
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tr&gt;
		&lt;td data-value=&quot;975683133000&quot;&gt;&lt;!-- 1st December 2000 --&gt;&lt;/td&gt;
	&lt;/tr&gt;
	...
&lt;/table&gt;</code></pre>

</div>

<div class="examples">
			<div class="example javascript plural">
				<p>
					Implementing a date column through the options requires the column's <a href="../getting-started.html#column-type"><code>type</code></a> option be set to <code>"date"</code>
					and that the <a href="../getting-started.html#column-name"><code>name</code></a> of the column matches a date property in the row data.
				</p>
			</div>
			<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;columns&quot;: [{
			&quot;type&quot;: &quot;date&quot;,
			&quot;name&quot;: &quot;started&quot;,
			...
		},{
			...
		}],
		&quot;rows&quot;: [{
			&quot;started&quot;: /* 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. */,
			...
		},{
			...
		}]
	});
});</code></pre>

</div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../js/prism.js"></script>

<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/docs.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>

<script src="../../compiled/footable.js"></script>

<script>
	jQuery(function($){
	});
</script>
</body>
</html>

Path:

home / opexmaga / public_html / teknonovin.com / management / vendors / bower_components / FooTable / docs / columns /

?? Editing: date.html

Path:

?? Upload