---
title: "DateRangeFilter"
description: "The period filter of a dashboard: preset windows ending today and a custom range on a calendar, with a button to clear it. The value is plain days, so the app can keep it in the URL."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# DateRangeFilter

## Field

A full-width trigger for a filter panel or a form.

```tsx
import type { CalendarDate } from '@internationalized/date';
import { useState } from 'react';
import type { RangeValue } from 'react-aria-components';
import { DateRangeFilter } from '@arbol-ai/ui';

const FieldExample = () => {
  const [period, setPeriod] = useState<RangeValue<CalendarDate> | null>(null);
  return (
    <div className="max-w-xs">
      <DateRangeFilter label="Appointment date" onChange={setPeriod} value={period} />
    </div>
  );
};

<FieldExample />
```

## Chip in a filter row

The compact look beside other filters; it names the preset while the dates match it.

```tsx
import { getLocalTimeZone, today } from '@internationalized/date';
import type { CalendarDate } from '@internationalized/date';
import { useState } from 'react';
import type { RangeValue } from 'react-aria-components';
import { DateRangeFilter } from '@arbol-ai/ui';

const ChipExample = () => {
  const now = today(getLocalTimeZone());
  const [period, setPeriod] = useState<RangeValue<CalendarDate> | null>({
    start: now.subtract({ days: 6 }),
    end: now,
  });
  return (
    <DateRangeFilter
      firstDayOfWeek="mon"
      label="Created"
      onChange={setPeriod}
      value={period}
      variant="chip"
    />
  );
};

<ChipExample />
```

## Source

The examples above are [`src/components/date-range-filter/date-range-filter.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/date-range-filter/date-range-filter.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/pickers/date-range-filter/index.mdx