{% extends "component-demo-base.html" %} {% set TAG_NAME="x-datepicker" %} {% set COMPONENT_NAME="datepicker" %} {% block demoContent %}

<x-datepicker>'s are a polyfill for <input type="date">.

In fact, if <input type="date"> elements are natively supported, <x-datepicker>'s default to rendering them instead of a custom UI.

Basic usage

Markup

<x-datepicker></x-datepicker>

Properties


        
Top

Forcing polyfill UI view with polyfill

In some cases, you may wish for a consistent UI across all browsers, instead of selectively displaying native inputs. If this is the case, set the polyfill attribute in the markup.

Markup

<x-datepicker polyfill></x-datepicker>

Properties


        
Top

Submitting in forms with name, using .submitValue

Much like any form input element, <x-datepicker> elements require a name attribute to submit.

Note that the value submitted to the form will be equivalent to the .submitValue of the <x-datepicker>, as .submitValue consists of the current .value of the <x-datepicker>, but parsed into a string with the ISO date format of YYYY-MM-DD.

Markup

<form>
<x-datepicker name="ahoy-there-datey"></x-datepicker>
<input type="submit"/>
</form>

Properties


        
Top

Listening for date changes

In order to detect user input to the datepicker, two different events are fired by the <x-datepicker>, which act in different ways:

Without polyfill

With polyfill

Initial markup

<p>Without polyfill</p>
<x-datepicker></x-datepicker>
<p>With polyfill</p>
<x-datepicker polyfill></x-datepicker>

Events


        
Top
{% endblock %}