DateRangeFacet

Save PDF

Last Updated: May 5, 2026
5 minute read

MarkLogic Server
Documentation

The DateRangeFacet widget displays start and end date pickers for a faceted date property in a set of search results.Users can select start and end values to constrain a search by the selected range.

DateRangeFacet MarkLogic setup

Faceted search in MarkLogic requires a range index on the faceted property. A range index can be added for a property using the Admin Interface or a MarkLogic API. This screen shot shows a path range index added to the dob property in the Admin Interface:

A path range index is added to the dob property in the Admin Interface.

Once the index is added, facets for the property can be returned in search results. To do this, a constraint is added in the query options of the application:

<?xml version="1.0" encoding="UTF-8"?>
<options xmlns="http://marklogic.com/appservices/search">
   <constraint name="dob">
        <range type="xs:date" facet="true" collation="">
            <path-index>/envelope/dob</path-index>
        </range>
   </constraint>
   <return-facets>true</return-facets>
</options>

The constraint settings correspond to the settings for the index. return-facets must be set to true so that facet results are returned with the search results. This example shows the dob facet information returned in the search response:

{
    "snippet-format": "snippet",
    "total": 3,
    "start": 1,
    "page-length": 10,
    "selected": "include",
    "results": [
        {
            "index": 1,
            "uri": "/person/1001.json",
            "path": "fn:doc(\"/person/1001.json\")",
            "score": 0,
            "confidence": 0,
            "fitness": 0,
            "href": "/v1/documents?uri=%2Fperson%2F1001.json",
            "mimetype": "application/json",
            "format": "json",
            "matches": [
                {
                    "path": "fn:doc(\"/person/1001.json\")/object-node()",
                    "match-text": [
                        "person Nerta Hallwood Marketing Manager Active 1985-03-04 104000 person-1001.jpg"
                    ]
                }
            ],
            "extracted": {
                "kind": "array",
                "content": [
                    {
                        "envelope": {
                            "entityType": "person",
                            "id": 1001,
                            "firstName": "Nerta",
                            "lastName": "Hallwood",
                            "title": "Marketing Manager",
                            "status": "Active",
                            "dob": "1985-03-04",
                            "salary": 104000,
                            "image": "person-1001.jpg",
                        }
                    }
                ]
            }
        },
        // ...
    ],
    "facets": {
        "dob": {
            "type": "xs:date",
            "facetValues": [
                {
                    "name": "1964-09-30",
                    "count": 1,
                    "value": "1964-09-30"
                },
                {
                    "name": "1985-03-04",
                    "count": 1,
                    "value": "1985-03-04"
                },
                {
                    "name": "1988-12-15",
                    "count": 1,
                    "value": "1988-12-15"
                }
            ]
        }   
    },
    // ...
}

DateRangeFacet example rendering

This example shows the DateRangeFacet widget. The widget has start and end date pickers for a faceted dob property in the results. With the constraint applied, only documents where the dob property is between 1/1/1980 and 12/31/1990 are returned and displayed.

Example rendering of the DateRangeFacet.

DateRangeFacet example configuration

This code shows the DateRangeFacet widget imported and configured in a React application:

import { useContext, useState } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, ResultsSnippet, DateRangeFacet } from "ml-fasttrack";
  
function App() {
  
  const context = useContext(MarkLogicContext);
 
  const [dateVals, setDateVals] = useState({ start: new Date(1980, 0, 1), end: new Date(1990, 11, 31) });
  
  const handleSearch = (params) => {
    context.setQtext(params?.q);
  }
 
  const updateDateRange = (constraint, previousConstraint, selection) => {    
    constraint && context.addRangeFacetConstraint(constraint)
    constraint === undefined && context.removeRangeFacetConstraint(previousConstraint)
    setDateVals(constraint)
  }
 
  const resetDateRange = (constraint, previousConstraint, selection) => {
    context.removeRangeFacetConstraint(previousConstraint)
    setDateVals({ start: new Date(1980, 0, 1), end: new Date(1990, 11, 31) })
  }
  
  return (
    <div className="App">
      <div>
        <SearchBox onSearch={handleSearch}/>
      </div>
      <div style={{display: 'flex', flexDirection: 'row'}}>
          <div style={{width: '640px'}}>
            <ResultsSnippet
              results={context.searchResponse.results}
              paginationFooter={true}
            />
          </div>
          <div>
            {context?.searchResponse?.facets?.dob &&
              <DateRangeFacet
                title={'Date of Birth'}
                name={'dob'}
                onSelect={updateDateRange}
                type="input"
                MinInputConfig={{
                  props: {
                    defaultValue: new Date(1980, 0, 1),
                    label: "Start"
                  }
                }}
                MaxInputConfig={{
                  props: {
                    defaultValue: new Date(1990, 11, 31),
                    label: "End"
                  }
                }}
                resetConfig={{
                  onReset: resetDateRange
                }}
              />
            }
          </div>
      </div>
    </div>
  );
}
  
export default App;

DateRangeFacet code explanation

In the DateRangeFacet example configuration:

The name prop is set to the name of the date facet to display from the search response object.
The selection information from the widget is updated in the dateVals state variable by the onSelect callback. This information is cleared by the onReset callback.

See the section Setting and resetting facet widgets.

DateRangeFacet API

Prop	Type	Description
data	{ type: string; facetValues: { name: string; count: number; value: string; }[]; }	Facet data to display from search results.
title	string	Facet title for the collapsible header when in facet mode and `showAccordion` is not false. If not provided, `name` will be used as the facet key.
subTitle	string	Facet subtitle for the collapsible header when in facet mode and `showAccordion` is not false.
name	string	The unique key used to identify this facet. Required if `title` is not provided.
dateFormat	string	Specifies the date format. See the date-fns documentation. The default value is `"yyyy-MM-dd"`.
options	string	Sets the date-fn options for the "format(date, format, options)" function. See the date-fns documentation.
showAccordion	boolean	Indicates whether to show the expansion header.
containerStyle	CSSProperties	CSS styles applied to the widget.
ExpansionPanelProps	ExpansionPanelProps	Expansion panel configuration.
removeAccordion	boolean	Toggle state if component should be wrapped in a collapsible panel. Additional configuration can be set on ExpansionPanelProps.
startOperator	string	Sets the operator for the range start. See the MarkLogic documentation. The default is `GE`.
MinInputConfig	{ type: "picker", props: DatePickerProps } \| { type: "input", props: DatePickerProps }	Optional configuration for the minimum facet range input. Applied configuration must match the defined `type` attribute. See KendoReact DatePickerProps.
endOperator	string	Sets the operator for the range end. See the MarkLogic documentation. The default value is `LE`.
MaxInputConfig	{ type: "picker", props: DatePickerProps } \| { type: "input", props: DatePickerProps }	Optional configuration for the maximum facet range input. Applied configuration must match the defined `type` attribute. See KendoReact DatePickerProps.
onSelect	((currentFacet: DateFacetSelection[], previousFacet: DateFacetSelection[], value: SelectionRange) => void)	Callback function for the select event. Receives an array of selection objects for the start and end date values, the previous value, and the SelectionRange value. See DateFacetSelection API.
type	("input" \| "picker" )	The type of data input.
resetConfig	({ hide?: boolean; label?: string; ButtonProps?: ButtonProps; onReset?: (currentFacet: DateFacetSelection[], previousFacet: DateFacetSelection[], value: SelectionRange) => void; })	Applies a Reset button to the bottom of the component. The `onReset` callback receives an array of selection objects for the start and end date values, the previous value, and the SelectionRange value. See DateFacetSelection API.
resetConfig.hide	boolean	Whether to hide the Reset button.
resetConfig.label	string	The Reset button label.
resetConfig.ButtonProps	ButtonProps	KendoReact Button props for the Reset button.
resetConfig.onReset	(currentFacet: DateFacetSelection[], previousFacet: DateFacetSelection[], value: SelectionRange) => void;	Callback function triggered when the user clicks the Reset button.
ref	const facetRef = useRef(null);	A React ref object that can be used to access the underlying DOM element or component instance. See [Setting and resetting facet widgets](../setting-and-resetting-facet-widgets.html "Setting and resetting facet widgets").

DateFacetSelection API

This example shows the DateFacetSelection objects passed to the onSelect and onReset callbacks:

export interface DateFacetSelection {
  type: 'number';
  name: string;
  value: string; // ISO 8601 date string, e.g. "2023-12-31"
  operator: 'GE' | 'LE';
  title: string;
}

Develop with FastTrack

DateRangeFacet

Table of Contents

DateRangeFacet

DateRangeFacet MarkLogic setup

DateRangeFacet example rendering

DateRangeFacet example configuration

DateRangeFacet code explanation

Setting and resetting the widget

DateRangeFacet API

DateFacetSelection API