DateRangeFacet

Save PDF

Last Updated: May 5, 2026
4 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, event) => {    
    constraint && context.addRangeFacetConstraint(constraint)
    constraint === undefined && context.removeRangeFacetConstraint(previousConstraint)
    setDateVals(event?.value)
  }
 
  const resetDateRange = (event, dateVals, constraint) => {
    context.removeRangeFacetConstraint(constraint)
    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'}
                isFacet={true}
                value={dateVals}
                onSelect={updateDateRange}
                resetVisible={true}
                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.

DateRangeFacet API

Prop	Type	Description
title	string	Facet title for the collapsible header when in facet mode and `showAccordion` is not false.
subTitle	string	Facet subtitle for the collapsible header when in facet mode and `showAccordion` is not false.
name	string	Facet name in facet data.
defaultValue	object	Sets the default value of the DateRangeFacet. See the Kendo DateRangeFacetProps. For example: `{ start: new Date(1960, 0, 1), end: new Date(1990, 11, 31) }`.
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.
startOperator	string	Sets the operator for the range start. See the MarkLogic documentation. The default is `GE`.
endOperator	string	Sets the operator for the range end. See the MarkLogic documentation. The default value is `LE`.
resetText	string	Text of the reset button. The default value is `Reset`.
resetClassName	string	CSS class name to apply to the Reset button.
reset	ReactNode	React element for defining a custom Reset button.
onSelect	`((value: { type: string; name: string; value: string; operator: string; title: string; }[], previousValue: any, e: any) => 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 event.
onReset	`((value: any, facetValue: any, e: any) => void)`	Callback function for the reset event. Is passed the current value, facet value, and event.

DateRangeFacet callbacks

Example date range object passed to callbacks

{
    "start": "1980-01-01T08:00:00.000Z",
    "end": "1990-12-31T08:00:00.000Z"
}

Example constraint passed to callbacks

[
    {
        "type": "date",
        "name": "dob",
        "value": "1980-01-01",
        "operator": "GE",
        "title": "Date of Birth"
    },
    {
        "type": "date",
        "name": "dob",
        "value": "1990-12-31",
        "operator": "LE",
        "title": "Date of Birth"
    }
]

Develop with FastTrack

DateRangeFacet

Table of Contents

DateRangeFacet

DateRangeFacet MarkLogic setup

DateRangeFacet example rendering

DateRangeFacet example configuration

DateRangeFacet code explanation

DateRangeFacet API

DateRangeFacet callbacks

Example date range object passed to callbacks

Example constraint passed to callbacks