---
title: Coveo Date Facet Range
slug: '3024'
canonical_url: https://docs.coveo.com/en/3024/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Coveo Date Facet Range
> **Legacy feature**
>
> The Coveo Hive Framework is now in maintenance mode and is no longer recommended for new implementations.
> 
> To build new search experiences, use one of Coveo's more modern, lightweight, and responsive libraries.
> To get started, see the [Build search](https://docs.coveo.com/en/2473/) article.

> **Leading practice**
>
> The [Coveo Dynamic Date Facet Range](https://docs.coveo.com/en/3211/) is now recommended over the **Coveo Date Facet Range** rendering.

Implements the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) [FacetRange](https://coveo.github.io/search-ui/components/facetrange.html) component to allow filtering of results based on a date field value, by selecting one or multiple date ranges.

## Usage notes

* The Sitecore date field which the facet is based on must be included for indexing in the **Templates** table of the **Indexing Manager** (see [About the Indexing Manager - Fields](https://docs.coveo.com/en/2566#fields)).

* To use the **{doctitle}** rendering with custom date ranges, create a content tree structure, such as the one below, containing a `Custom Date Ranges` item with children `Date Range` items.
This structure can be placed anywhere in the content tree.
You will reference the location of the `Custom Date Ranges` item in the `Facet value ranges` data source option (see [Configure custom ranges for a date range or numeric range facet](https://docs.coveo.com/en/2782/)).

![Dyn Date Facet Range required items | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/dynamic-date-facet-range-required-items.png)

* Any change to the facet value selections triggers a new Search API call.

* You can [customize the CSS](https://docs.coveo.com/en/2342/) associated with this rendering.

## Insertion location


<div>
<h3>Coveo Hive</h3>
  <p>The <strong>Coveo Date Facet Range</strong> rendering is an Allowed Control in the following placeholder(s): <code class="highlighter-rouge">Facets</code></p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/date-facet-range-hive.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the <strong>Coveo Date Facet Range</strong> rendering.
  </div>
</div>
<div>
<h3>Coveo Hive SXA</h3>
  <p>Coveo for Sitecore SXA rendering insertion locations aren't limited by placeholder Allowed Controls. The <strong>Coveo Date Facet Range</strong> rendering may therefore be inserted throughout the partial design, whether in Coveo for Sitecore or Sitecore placeholders.</p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/date-facet-range-sxa.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the <strong>Coveo Date Facet Range</strong> rendering.
  </div>
</div>

## Data source options

The following table lists the available data source options for this rendering.

[%header,cols="33%,66%"]
|===
|Option name
|Description

|Title
|See the [title](https://coveo.github.io/search-ui/components/facet.html#options.title) component option.

|Field
|See the [field](https://coveo.github.io/search-ui/components/facet.html#options.field) component option.

|Facet ID
|See the [id](https://coveo.github.io/search-ui/components/facet.html#options.id-1) component option.

|Number of values
|See the [numberOfValues](https://coveo.github.io/search-ui/components/facet.html#options.numberofvalues) component option.

|Sort
|See the [sortCriteria](https://coveo.github.io/search-ui/components/facet.html#options.sortcriteria) component option.

|Date format
|The date format to use to display date values.
Uses the [Globalize JavaScript plugin](https://github.com/jquery/globalize) format.

|Ignore accents in facet search
|See the [facetSearchIgnoreAccents](https://coveo.github.io/search-ui/components/facet.html#options.facetsearchignoreaccents) component option.

|Allowed facet values
|See the [`allowedValues`](https://coveo.github.io/search-ui/components/facet.html#options.allowedvalues) component option.

|Facet value caption
|This option is exposed for legacy reasons.

|Enable collapse button
|See the [`enableCollapse`](https://coveo.github.io/search-ui/components/facet.html#options.enablecollapse) component option.

|Enable settings button
|See the [`enableSettings`](https://coveo.github.io/search-ui/components/facet.html#options.enablesettings) component option.

|Sort criteria displayed in the settings menu
|See the [`availableSorts`](https://coveo.github.io/search-ui/components/facet.html#options.availablesorts) component option.

|Enable search for the facet
|See the [enableFacetSearch](https://coveo.github.io/search-ui/components/facet.html#options.enablefacetsearch) component option.

|Number of values to display in the facet search results
|See the [numberOfValuesInFacetSearch](https://coveo.github.io/search-ui/components/facet.html#options.numberofvaluesinfacetsearch) component option.

|Enable more/less button
|See the [enableMoreLess](https://coveo.github.io/search-ui/components/facet.html#options.enablemoreless) component option.

|Number of additional facet values to fetch when 'More' is clicked
|See the [pageSize](https://coveo.github.io/search-ui/components/facet.html#options.pagesize) component option.

|Include facet values in the omnibox
|Don't use this option.
It is only exposed for legacy reasons.

|Include facet values in the breadcrumb
|See the [includeInBreadcrumb](https://coveo.github.io/search-ui/components/facet.html#options.includeinbreadcrumb) component option.

|Maximum number of facet values displayed in the breadcrumb
|See the [numberOfValuesInBreadcrumb](https://coveo.github.io/search-ui/components/facet.html#options.numberofvaluesinbreadcrumb) component option.

|Computed field
|See the [`computedField`](https://coveo.github.io/search-ui/components/facet.html#options.computedfield) component option.
Not to be confused with a Sitecore computed index field.

|Computed field operation
|See the [computedFieldOperation](https://coveo.github.io/search-ui/components/facet.html#options.computedfieldoperation) component option.

|Computed field format
|See the [computedFieldFormat](https://coveo.github.io/search-ui/components/facet.html#options.computedfieldformat) component option.

|Computed field caption
|See the [computedFieldCaption](https://coveo.github.io/search-ui/components/facet.html#options.computedfieldcaption) component option.

|Is multi-value field
|See the [isMultiValueField](https://coveo.github.io/search-ui/components/facet.html#options.ismultivaluefield) component option.

|Facet uses the AND operator
|See the [`useAnd`](https://coveo.github.io/search-ui/components/facet.html#options.useand) component option.

|Allows user to select the facet operator
|See the [enableTogglingOperator](https://coveo.github.io/search-ui/components/facet.html#options.enabletogglingoperator) component option.

|Facet accuracy determined by the number of scanned results
|See the [injectionDepth](https://coveo.github.io/search-ui/components/facet.html#options.injectiondepth) component option.

|Enable 'Save Facet State' option in Settings menu
|See the [enableSettingsFacetState](https://coveo.github.io/search-ui/components/facet.html#options.enablesettingsfacetstate) component option.

|Preserve facet position under mouse on new facet query
|See the [`preservePosition`](https://coveo.github.io/search-ui/components/facet.html#options.preserveposition) component option.

|Facet value ranges
|Specifies whether to use automatically generated date ranges or custom date ranges created in Sitecore.

|DOM unique ID
a|{empty}
--
Randomly generated HTML element ID.
--

|Additional data attributes
a|{empty}
--
Allows [use of the Coveo JavaScript Search Framework **FacetRange** component options](https://docs.coveo.com/en/2776/) that aren't directly available in the data source.
--
|===

## Sample generated HTML and corresponding visual output

In your Sitecore instance, you created a `My Custom Date Ranges` item using the `/sitecore/templates/Coveo Hive/Custom Ranges Parameters/Custom Date Ranges` template.
Under this item, you created six range items using the `/sitecore/templates/Coveo Hive/Custom Ranges Parameters/Date Range` template.
These range items divide the January 1, 2018 to December 31, 2020 timeframe into six half-year periods.

![Image showing Coveo custom ranges configured in a Sitecore instance | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/custom-date-ranges-and-children-date-range-items.png)

In a **Coveo Date Facet Range** data source, in the `Facet value ranges` option, you select the `My Custom Date Ranges` item.

**Generated HTML**:

```html
<div id="_351D3A2A-0326-48CE-A9CA-43D6AF8AFBEA" class="CoveoFacetRange"
data-available-sorts="alphaascending,alphadescending,occurrences,score"
data-prebind-field="fieldTranslator" data-field="@updated" data-id="last_update"
data-injection-depth="1000" data-sort-criteria="alphaascending"
data-title="Last Updated In"
data-ranges="[{"start":"2018-01-01T05:00:00.000Z","end":"2018-07-01T03:59:00.000Z","endInclusive":true,"label":"2018 (Jan-Jun)"},
{"start":"2018-07-01T04:00:00.000Z","end":"2019-01-01T04:59:00.000Z","endInclusive":true,"label":"2018 (Jul-Dec)"},
{"start":"2019-01-01T05:00:00.000Z","end":"2019-07-01T03:59:00.000Z","endInclusive":true,"label":"2019 (Jan-Jun)"},
{"start":"2019-07-01T04:00:00.000Z","end":"2020-01-01T04:59:00.000Z","endInclusive":true,"label":"2019 (Jul-Dec)"},
{"start":"2020-01-01T05:00:00.000Z","end":"2020-07-01T03:59:00.000Z","endInclusive":true,"label":"2020 (Jan-Jun)"},
{"start":"2020-07-01T04:00:00.000Z","end":"2021-01-01T04:59:00.000Z","endInclusive":true,"label":"2020 (Jul-Dec)"}]"
data-date-field="true" data-applied-prebind="true">
```

**Facet visual output**:

![Image of date facet range associated with custom range items | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/date-facet-range-with-custom-ranges.png)