# dateRangeFilter

**Category:** Features/Filter/Factories

## Design

### Usage

The filter is used together with [DateRangeFilter](./?path=/story/features-filter-components--daterangefilter) component. Check the component examples section to see all possibilities for this filter.

**Do:**

- Use with DateRangeFilter component


**Don't:**

- Use with other filter components


```tsx
import { dateRangeFilter } from '@wix/patterns';
```

### Basic

```tsx
import React from 'react';
import { dateRangeFilter, DateRangeFilter } from '@wix/patterns';

function dateRangeFilterExample() {
  const [filter] = React.useState(() => dateRangeFilter());

  return <DateRangeFilter filter={filter} />;
}
```

## API

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `parse` | `((value: unknown) => Date \| null)` | No | - | Convert an unknown object to a T. @param value |
| `simplify` | `((value: Date) => Partial<Date>)` | No | - | Return a simplified form of an item for serialization. @param value |
| `matches` | `((item: RangeItem<Date>, value: RangeItem<Date>) => boolean)` | No | - | Indicates whether an item matches the current value of the filter |
| `isEmptyPreset` | `((preset?: string) => boolean)` | No | - | Indicates whether a preset does not exist or is empty |
| `parsePreset` | `((preset?: string) => RangeItem<Date>)` | No | - | Converts a preset string to a RangeItem @param preset |
| `persistent` | `boolean` | No | - | Marks the filter as a "context" or "scope" filter. This makes the filter not be visible in the sub-toolbar tag list, not saved in views, not counted as "X filters applied". |
| `initialValue` | `RangeItem<Date>` | No | - | The value to initialize the filter with (Optional) |
| `itemKey` | `((item: RangeItem<Date>) => string)` | No | - | A callback function that accepts an item and returns a unique ID of it. typically `item.id`. |
| `itemName` | `((item: RangeItem<Date>) => string)` | No | - | A callback function that accepts an item and returns the item name which is used in many messages through cairo |
| `equals` | `((item1: RangeItem<Date>, item2: RangeItem<Date>) => boolean)` | No | - | A function which accepts 2 items and returns true if they are equal |
| `isCustomField` | `boolean` | No | - | If the filter is a custom field |