THIS IS ARCHIVED DOCUMENTATION

DateFilter (Deprecated)

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

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, and false 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

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

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

Example Implementation

date-filter.fn.tsx

import {useEffect, useState, FunctionComponent, Fragment} from 'react';
import {
  buildDateRange,
  DateFilter as HeadlessDateFilter,
} from '@coveo/headless';
import dayjs from 'dayjs';
 
interface DateFilterProps {
  controller: HeadlessDateFilter;
}
 
function formattedDateValue(date?: string | Date) {
  if (!date) {
    return '';
  }
  return dayjs(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} />;
 * ```
 */