DateFilter (Search Engine)
DateFilter (Search Engine)
Example Implementation
date-filter.fn.tsx
import {
buildDateRange,
DateFilter as HeadlessDateFilter,
} from '@coveo/headless';
import {useEffect, useState, FunctionComponent, Fragment} from 'react';
import {parseDate} from '../date-facet/date-utils';
interface DateFilterProps {
controller: HeadlessDateFilter;
}
function formattedDateValue(date?: string | Date) {
if (!date) {
return '';
}
return parseDate(date).format('YYYY-MM-DD');
}
export const DateFilter: FunctionComponent<DateFilterProps> = (props) => {
const {controller} = props;
const [state, setState] = useState(controller.state);
let startRef: HTMLInputElement;
let endRef: HTMLInputElement;
useEffect(() => controller.subscribe(() => setState(controller.state)), []);
const {range} = state;
return (
<Fragment>
<input
key="start"
type="Date"
ref={(ref) => (startRef = ref!)}
defaultValue={formattedDateValue(range?.start)}
placeholder="Start"
/>
<input
key="end"
type="Date"
ref={(ref) => (endRef = ref!)}
defaultValue={formattedDateValue(range?.end)}
placeholder="End"
/>
<button
key="apply"
onClick={() => {
if (!startRef.validity.valid || !endRef.validity.valid) {
return;
}
controller.setRange(
buildDateRange({
start: startRef.valueAsDate!,
end: endRef.valueAsDate!,
})
);
}}
>
Apply
</button>
</Fragment>
);
};
// usage
/**
* ```tsx
* const controller = buildDateFilter(engine, {
* options: {
* field: 'date',
* },
* });
*
* <DateFilter controller={controller} />;
* ```
*/
The DateFilter
controller makes it possible to create a date filter.
Methods
clear
Clears the current filter.
disable
Disables the filter. In other words, prevents it from filtering results.
enable
Enables the filter. In other words, undoes the effects of disable
.
setRange
Updates the selected range.
You can use the buildDateRange
utility method in order to format the range values correctly.
Parameters
-
range:
DateFilterRange
The date range.
Returns boolean
: Whether the range is valid.
subscribe
Adds a callback that’s invoked on state change.
Parameters
-
listener:
() => void
A callback that’s invoked on state change.
Returns Unsubscribe
: A function to remove the listener.
Attributes
state
The state of the DateFilter
controller.
Properties
-
enabled:
boolean
Whether the filter is enabled and its value is used to filter search results.
-
facetId:
string
The facet ID.
-
isLoading:
boolean
Returns
true
if a search is in progress, andfalse
if not. -
range?:
DateFacetValue
The current selected range.
Initialize
buildDateFilter
Creates a DateFilter
controller instance.
Parameters
-
engine:
SearchEngine
The headless engine.
-
props:
DateFilterProps
The configurable
DateFilter
controller properties.
Returns DateFilter
DateFilterProps
The configurable DateFilter
controller properties.
Properties
-
options:
DateFilterOptions
The options for the
DateFilter
controller. -
initialState?:
DateFilterInitialState
The initial state.
DateFilterOptions
The options for the DateFilter
controller.
Properties
-
field:
string
The field whose values you want to display in the filter.
-
facetId?:
string
A unique identifier for the controller. By default, a unique random identifier is generated.
-
filterFacetCount?:
boolean
Whether to exclude folded result parents when estimating the result count for each facet value.
Default:
true
-
injectionDepth?:
number
The maximum number of results to scan in the index to ensure that the facet lists all potential facet values.
Note: A high injectionDepth may negatively impact the facet request performance.
Minimum:
0
Default:
1000
DateFilterInitialState
The initial state.
Properties
-
range:
DateFilterRange
The initial selected range.
Related Types
DateFacetValue
Properties
-
end:
string
The ending value for the date range, formatted as
YYYY/MM/DD@HH:mm:ss
or the Relative date format "period-amount-unit" -
endInclusive:
boolean
Whether or not the end value is included in the range.
-
numberOfResults:
number
The number of results that have the facet value.
-
start:
string
The starting value for the date range, formatted as
YYYY/MM/DD@HH:mm:ss
or the Relative date format "period-amount-unit" -
state:
'idle' | 'selected'
The state of the facet value, indicating whether it is filtering results (
selected
) or not (idle
).
DateFilterRange
Properties
-
end:
string
The ending value for the date range, formatted as
YYYY/MM/DD@HH:mm:ss
or the Relative date format "period-amount-unit" -
start:
string
The starting value for the date range, formatted as
YYYY/MM/DD@HH:mm:ss
or the Relative date format "period-amount-unit"
Unsubscribe
Call signatures
-
(): void