Date Range Facet Component
- Jordan Kasper (Deactivated)
Owned by Jordan Kasper (Deactivated)
Overview
The Date Range Facet component renders number input elements for minimum and maximum value.
Selector
The selector for this component is <hawksearch-date-range-facet>.
Data Model
The following data model is exposed to the Handlebars template:
{
startValue: string;
endValue: string;
minValue: string;
maxValue: string;
}Event Binding Attributes
Attribute Name | Attribute Value |
|---|---|
hawksearch-start | Â |
hawksearch-end | Â |
These attributes should be placed on Date Picker elements. When these elements lose focus (blurred), the entered range will be applied as a facet value.
Default Template
<div class="date-range-facet">
<div class="row">
<div class="column column--6">
<hawksearch-date-picker hawksearch-start value="{{startValue}}" min="{{minValue}}" max="{{endValue}}" label="Start Date"></hawksearch-date-picker>
</div>
<div class="column column--6">
<hawksearch-date-picker hawksearch-end value="{{endValue}}" min="{{startValue}}" max="{{maxValue}}" label="End Date"></hawksearch-date-picker>
</div>
</div>
</div>Â