---
{
	"title": "Input type=\"date\" polyfill (date picker)",
	"language": "en",
	"category": "Polyfills",
	"description": "Emulates <input type=\"date\"> support for browsers that do not have support. This dynamically generates a calendar interface for selecting a date in a form.",
	"tag": "datepicker",
	"parentdir": "datepicker",
	"altLangPrefix": "datepicker",
	"dateModified": "2015-03-06"
}
---
<section>
	<h2>Purpose</h2>
	<p>Provide an interface for selecting a date in a form. Implements the <a href="https://www.w3.org/TR/wai-aria-practices/#datepicker">WAI-ARIA Date Picker design pattern</a>.</p>
</section>

<section>
	<h2>Relevant attributes</h2>
	<dl>
		<dt>Relevant start date attributes:</dt>
		<dd><code>type="date"</code></dd>
		<dd><code>min="2013-03-27"</code></dd>
		<dd><code>max="2013-05-07"</code></dd>
		<dt>Relevant end date attributes:</dt>
		<dd><code>type="date"</code></dd>
		<dd><code>min="2013-03-27"</code></dd>
		<dd><code>max="2016-05-07"</code></dd>
	</dl>
</section>

<section>
	<h2>Examples</h2>
	<form method="get" action="#">
		<div class="form-group">
			<label for="startdate">Start date<span class="datepicker-format"> (<abbr title="Four digits year, dash, two digits month, dash, two digits day">YYYY-MM-DD</abbr>)</span></label>
			<input class="form-control" type="date" id="startdate" name="startdate" min="2013-03-27" max="2013-05-07" />
		</div>
		<div class="form-group">
			<label for="enddate">End date<span class="datepicker-format"> (<abbr title="Four digits year, dash, two digits month, dash, two digits day">YYYY-MM-DD</abbr>)</span></label>
			<input class="form-control" type="date" id="enddate" name="enddate" min="2013-03-27" max="2016-05-07" />
		</div>
		<div>
			<input class="btn btn-primary" type="submit" value="Submit" />
		</div>
	</form>
	<details class="mrgn-tp-md">
		<summary>View code</summary>
		<pre><code>&lt;div class=&quot;form-group&quot;&gt;
	&lt;label for=&quot;startdate&quot;&gt;Start date&lt;span class=&quot;datepicker-format&quot;&gt; (&lt;abbr title=&quot;Four digits year, dash, two digits month, dash, two digits day&quot;&gt;YYYY-MM-DD&lt;/abbr&gt;)&lt;/span&gt;&lt;/label&gt;
	&lt;input class=&quot;form-control&quot; type=&quot;date&quot; id=&quot;startdate&quot; name=&quot;startdate&quot; min=&quot;2013-03-27&quot; max=&quot;2013-05-07&quot; /&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
	&lt;label for=&quot;enddate&quot;&gt;End date&lt;span class=&quot;datepicker-format&quot;&gt; (&lt;abbr title=&quot;Four digits year, dash, two digits month, dash, two digits day&quot;&gt;YYYY-MM-DD&lt;/abbr&gt;)&lt;/span&gt;&lt;/label&gt;
	&lt;input class=&quot;form-control&quot; type=&quot;date&quot; id=&quot;enddate&quot; name=&quot;enddate&quot; min=&quot;2013-03-27&quot; max=&quot;2016-05-07&quot; /&gt;
&lt;/div&gt;</code></pre>
	</details>
</section>