---
title: "DatePicker"
description: "A date for a form, typed in the locale’s format or chosen on a calendar; DateRangePicker does the same for a period. For a dashboard’s period filter, use DateRangeFilter."
---

> 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.

# DatePicker

## Date

```tsx
import { getLocalTimeZone, isWeekend, today } from '@internationalized/date';
import { useLocale } from 'react-aria-components';
import { DatePicker } from '@arbol-ai/ui';

const AppointmentExample = () => {
  const { locale } = useLocale();
  return (
    <DatePicker
      className="max-w-xs"
      description="Weekdays only."
      firstDayOfWeek="mon"
      isDateUnavailable={(date) => isWeekend(date, locale)}
      label="Appointment date"
      minValue={today(getLocalTimeZone())}
    />
  );
};

<AppointmentExample />
```

## Date and time in 24 hours

```tsx
import { getLocalTimeZone, now } from '@internationalized/date';
import { DatePicker } from '@arbol-ai/ui';

<DatePicker
  className="max-w-xs"
  defaultValue={now(getLocalTimeZone())}
  granularity="minute"
  hideTimeZone
  hourCycle={24}
  label="Send the reminder at"
/>
```

## Period

```tsx
import { getLocalTimeZone, today } from '@internationalized/date';
import { DateRangePicker } from '@arbol-ai/ui';

() => {
  const start = today(getLocalTimeZone());
  return (
    <DateRangePicker
      className="max-w-sm"
      defaultValue={{ start, end: start.add({ weeks: 2 }) }}
      description="The agent calls contacts only between these days."
      label="Campaign dates"
    />
  );
}
```

## Source

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

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