DateRangeFilter | Arbol UI

Language

Appearance

Field

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

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.

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, which the library’s tests render too.