@react-querybuilder/datetime

@react-querybuilder/datetime

Augments react-querybuilder with enhanced date/time functionality.

To see this in action, check out the react-querybuilder demo with the "date/time" option enabled.

Full documentation

Installation

npm i react-querybuilder @react-querybuilder/datetime
# OR yarn add / pnpm add / bun add

Usage

To add date/time functionality to formatQuery, import a rule processor from @react-querybuilder/datetime/dayjs, @react-querybuilder/datetime/date-fns, or @react-querybuilder/datetime/luxon—depending on which library you wish to use or are already using—and pass it to the ruleProcessor option.

import { formatQuery } from 'react-querybuilder';
import {
  datetimeRuleProcessorMongoDBQuery,
  datetimeRuleProcessorSQL,
} from '@react-querybuilder/datetime/dayjs';

// SQL
formatQuery(query, { preset: 'postgresql', fields, ruleProcessor: datetimeRuleProcessorSQL });

// MongoDB
formatQuery(query, {
  format: 'mongodb_query',
  fields,
  ruleProcessor: datetimeRuleProcessorMongoDBQuery,
});

The date/time rule processors will fallback to using the default rule processors if the rule's field configuration does not have a datatype value of "date", "datetime", "datetimeoffset", or "timestamp", or if the operator is specific to string comparisons ("contains", "beginsWith", "endsWith", etc.). You can provide a custom isDateField function to override this behavior through the context option.

Changelog

[v8.8.4] - 2025-08-27

Added

• [#932] New useOptionListProp hook to standardize option list prop normalization.

Fixed

• [#937] The match property is now removed when a rule's field is updated to a field that does not support match modes.