x-datepicker
<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
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
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
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:
input
: This event is fired when the user selects a date on the calendar, and is also fired continuously as the user enters a date.change
: This event is fired whenever the date corresponding to the datepicker (ie. the.submitValue
) changes, or when the user hits the Enter key/leaves the datepicker's focus, causing the date to be parsed into ISO format.
Without polyfill
With polyfill
Initial markup
<p>Without polyfill</p>
<x-datepicker></x-datepicker>
<p>With polyfill</p>
<x-datepicker polyfill></x-datepicker>