---
{
	"title": "Input type=\"date\" polyfill (date picker)",
	"language": "en",
	"category": "Polyfills",
	"categoryfile": "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.",
	"altLangPrefix": "datepicker",
	"dateModified": "2014-08-06"
}
---
<span class="wb-prettify all-pre hide"></span>

<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>Use when</h2>
	<p>This feature can be used on any page where selecting a date in a form is required.</p>
</section>

<section>
	<h2>Working example</h2>
	<ul>
		<li><a href="../../../demos/datepicker/datepicker-en.html">English example</a></li>
		<li><a href="../../../demos/datepicker/datepicker-fr.html">French example</a></li>
	</ul>
</section>

<section>
	<h2>How to implement</h2>
	<ol>
		<li>Add a text input field for each date that will be requested. Each text input field must have the <code>date</code> type applied to it.</li>
		<li><strong>Optional:</strong> Wrap the date format in the label with <code>&lt;span class="datepicker-format"&gt;&lt;/span&gt;</code> to hide it when the polyfill doesn't load (due to native support).</li>
		<li><strong>Optional:</strong> Add a <code>min</code> attribute containing the earliest date that can be selected by the user.</li>
		<li><strong>Optional:</strong> Add a <code>max</code> attribute containing the latest date that can be selected by the user.</li>
	</ol>

	<h3>Example Code</h3>
	<pre><code>&lt;div&gt;
	&lt;label for="startdate"&gt;Start Date&lt;span class="datepicker-format"&gt; (&lt;abbr title="Four digits year, dash, two digits month, dash, two digits day"&gt;YYYY-MM-DD&lt;/abbr&gt;)&lt;/span&gt;&lt;/label&gt;
	&lt;input type="date" id="startdate" name="startdate" min="2013-03-27" max="2013-05-07" /&gt;
&lt;/div&gt;
&lt;div&gt;
	&lt;label for="enddate"&gt;End Date&lt;span class="datepicker-format"&gt; (&lt;abbr title="Four digits year, dash, two digits month, dash, two digits day"&gt;YYYY-MM-DD&lt;/abbr&gt;)&lt;/span&gt;&lt;/label&gt;
	&lt;input type="date" id="enddate" name="enddate" min="2013-03-27" max="2016-05-07" /&gt;
&lt;/div&gt;</code></pre>
</section>

<section>
	<h2>Configuration options</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Option</th>
				<th>Description</th>
				<th>How to configure</th>
				<th>Example</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Hide Date Format</td>
				<td>Hide the date format when the polyfill doesn't load (due to native support)</td>
				<td>Wrap the date format in the label with: <pre><code>&lt;span class="datepicker-format"&gt;&lt;/span&gt;</code></pre></td>
				<td>
					<pre><code>&lt;label for="startdate"&gt;Start Date&lt;span class="datepicker-format"&gt; (&lt;abbr title="Four digits year, dash, two digits month, dash, two digits day"&gt;YYYY-MM-DD&lt;/abbr&gt;)&lt;/span&gt;&lt;/label&gt;</code></pre>
				</td>
			</tr>
			<tr>
				<td>Min Date</td>
				<td>The earliest date that can be selected by the user.</td>
				<td>Add a "min" attribute to the input field with a <abbr title="Four digits year, dash, two digits month, dash, two digits day">YYYY-MM-DD</abbr> date as the value.</td>
				<td>
					<pre><code>&lt;input type="date" id="startdate" name="startdate" min="2013-03-27" /&gt;</code></pre>
				</td>
			</tr>
			<tr>
				<td>Max Date</td>
				<td>The latest date that can be selected by the user.</td>
				<td>Add a "max" attribute to the input field with a <abbr title="Four digits year, dash, two digits month, dash, two digits day">YYYY-MM-DD</abbr> date as the value.</td>
				<td>
					<pre><code>&lt;input type="date" id="startdate" name="startdate" max="2013-05-07" /&gt;</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Events</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-date</code></td>
				<td>Triggered manually (e.g., <code>$( "input[type=date]" ).trigger( "wb-init.wb-date" );</code>).</td>
				<td>Used to manually initialize the <code>input type="date"</code> polyfill. <strong>Note:</strong> The <code>input type="date"</code> polyfill will be initialized automatically unless the <code>input type="date"</code> element is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-date</code> (v4.0.5+)</td>
				<td>Triggered automatically after the <code>input type="date"</code> polyfill initializes. <strong>Note:</strong> This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native <code>input type="date"</code> support.</td>
				<td>Used to identify where the <code>input type="date"</code> polyfill initialized (target of the event)
					<pre><code>$( document ).on( "wb-ready.wb-date", "input[type=date]", function( event ) {
});</code></pre>
					<pre><code>$( "input[type=date]" ).on( "wb-ready.wb-date", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/polyfills/datepicker">Source code for the input type="date" polyfill (date picker)</a></p>
</section>
