<anura-date adapter="some-adapter" source="123"></anura-date>
A date range selector
required: yes, live: no, default: -
With which adapter to talk to (to load the values from)
required: yes, live: on-load, default: -
What metadata field to query in order to get the possible values from. The value type will depend on the adapter that you're using (usually an ID or a UUID)
required: no, live: yes, default: -
Minimum date available, applied to the from field
required: no, live: yes, default: -
Maximum date available, applied to the to field
required: no, live: set by component, default: -
The value deriving from both date inputs in the form of from,to, e.g. 2023-01-01,2023-12-31
. Can be used to set an initial value, but will only be written to by the component afterwards.
required: no, live: set by component, default: -
The type of field that should be affected. This will be set by your adapter and is specific to the implementation. Don't touch this.
standard change event
Fired when the user selects values in the dropdown
<header part="header">
<span part="header-title"></span>
<span part="header-value"></span>
<button part="date-button header-clear">
<anura-icon part="header-icon header-icon-clear"></anura-icon>
</button>
<button part="date-button header-toggle">
<anura-icon part="header-icon header-icon-toggle"></anura-icon>
</button>
</header>
<fieldset part="fieldset">
<div part="fieldset-title">
<label part="fieldset-label"></label>
<button part="date-button fieldset-close">
<anura-icon part="date-icon date-icon-close"></anura-icon>
</button>
</div>
<div part="fieldset-body">
<label part="date-label date-label-from"></label>
<input part="date-input date-input-from">
<label part="date-label date-label-to"></label>
<input part="date-input date-input-to">
<button part="fieldset-reset"></button>
</div>
</fieldset>