Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

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:

{
  id: string;
  field: string | undefined;
  minValue: string | undefined;
  maxValue: string | undefined;
  rangeMin: string | undefined;
  rangeMax: string | undefined;
}

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}}"></hawksearch-date-picker>
        </div>
        <div class="column column--6">
            <hawksearch-date-picker hawksearch-end value="{{endValue}}" min="{{startValue}}" max="{{maxValue}}"></hawksearch-date-picker>
        </div>
    </div>
</div>

  • No labels