Skip to content

Instantly share code, notes, and snippets.

@csaftoiu
Created November 9, 2015 21:52
Show Gist options
  • Save csaftoiu/b4af4b04291907377990 to your computer and use it in GitHub Desktop.
Save csaftoiu/b4af4b04291907377990 to your computer and use it in GitHub Desktop.
Auto-generated doc for foundation-datepicker-angular
<h1><code ng:non-bindable="">datePicker</code>
<div><span class="hint">directive in module <code ng:non-bindable="">foundation.datepicker.angular</code>
</span>
</div>
</h1>
<div><h2 id="description">Description</h2>
<div class="description"><div class="foundation-datepicker-angular-directive-page foundation-datepicker-angular-directive-datepicker-page"><p>Element directive for
<a href="http://foundation-datepicker.peterbeno.com/example.html">foundation-datepicker</a>.
Adds a text input field which, when clicked, pops up the datepicker.</p>
</div></div>
<h2 id="usage">Usage</h2>
<div class="usage">as element:<pre class="prettyprint linenums">&lt;date-picker
ng-model="{string}"
[format="{string}"]
[language="{string}"]
[pick-time="{string}"]
[ng-mindate="{expression}"]
[ng-maxdate="{expression}"]&gt;
&lt;/date-picker&gt;</pre>
<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>ngModel</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="foundation-datepicker-angular-directive-page foundation-datepicker-angular-directive-datepicker-page"><p>Assignable angular expression to data-bind the date to.
This should be a JavaScript Date object.</p>
</div></td></tr><tr><td>format <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="foundation-datepicker-angular-directive-page foundation-datepicker-angular-directive-datepicker-page"><p>The date format, combination of d, dd, m, mm, yy, yyyy, hh, ii. Default <code>&quot;yyyy-mm-dd&quot;</code>.</p>
</div></td></tr><tr><td>language <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="foundation-datepicker-angular-directive-page foundation-datepicker-angular-directive-datepicker-page"><p>Two-char iso shortcut of language you want to use, default <code>&quot;en&quot;</code>. Must include the
proper locale <code>.js</code> file, via a <code>&lt;script&gt;</code> tag.</p>
</div></td></tr><tr><td>pickTime <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="foundation-datepicker-angular-directive-page foundation-datepicker-angular-directive-datepicker-page"><p>Provide this param to enable picking the time after picking the date.</p>
</div></td></tr><tr><td>ngMindate <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="foundation-datepicker-angular-directive-page foundation-datepicker-angular-directive-datepicker-page"><p>Specify a minimum allowable date.</p>
</div></td></tr><tr><td>ngMaxdate <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="foundation-datepicker-angular-directive-page foundation-datepicker-angular-directive-datepicker-page"><p>Specify a maximum allowable date.</p>
</div></td></tr></tbody></table></div>
<h2 id="example">Example</h2>
<div class="example"><div class="foundation-datepicker-angular-directive-page foundation-datepicker-angular-directive-datepicker-page"><p>Generate an input element which picks a date and time, bound to <code>$scope.travelTime</code>, that must be &gt;= today&#39;s date.</p>
<p>HTML:
<pre class="prettyprint linenums">
&lt;date-picker ng-model="travelTime" pick-time
format="yyyy-mm-dd hh:ii"
ng-mindate="today"&gt;&lt;/date-picker&gt;
</pre>
Controller:
<pre class="prettyprint linenums">
$scope.travelTime = new Date();
var now = new Date();
$scope.today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
</pre>
Output may be something like: <br>
<img src="http://i.imgur.com/5KWGtqu.png"></p>
</div></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment