Date Range Filter

The DateRangeFilter is a new filter field type (FilterFieldTypes.DateRange) in the filters system. It presents a dropdown with grouped preset date ranges (Recommended, Relative dates, Calendar months) and a “Select custom range” option. Clicking “Select custom range” reveals a two-month calendar alongside the preset list for picking an arbitrary date range.

Usage

import { FilterField, FilterFieldTypes } from '@harnessio/ui/components'
import type { DateRangeValue } from '@harnessio/ui/components'

const MyComponent = () => {
  const [value, setValue] = useState<DateRangeValue | undefined>();

  return (
    <FilterField
      filterOption={{
        type: FilterFieldTypes.DateRange,
        label: 'Timeframe',
        value: 'timeframe',
      }}
      removeFilter={() => {}}
      shouldOpenFilter={false}
      onChange={(val) => setValue(val)}
      value={value}
    />
  );
};

With Custom Presets

You can provide your own set of presets via filterFieldConfig.presets. Each preset defines a label, a unique value, a group for visual grouping, and a getRange function that returns { from: Date, to: Date }.

Without Custom Range

Set showCustomRange: false to hide the “Select custom range” option and only show presets.

API Reference

FilterFieldTypes.DateRange

Use FilterFieldTypes.DateRange as the type in a FilterOptionConfig to render a date range filter.

Prop	Required	Default	Type
type	true		FilterFieldTypes.DateRange
label	true		string
value	true		string
filterFieldConfig.presets	false		DateRangePreset[]
filterFieldConfig.showCustomRange	false	true	boolean

DateRangeValue

The value emitted by the filter when a range is selected.

Prop	Required	Default	Type
from	true		Date
to	true		Date
preset	false		string

DateRangePreset

Defines a preset date range option.

Prop	Required	Default	Type
label	true		string
value	true		string
getRange	true		() => { from: Date; to: Date }
group	true		'recommended' | 'relative' | 'calendar'