# DatePicker

Shows the selected date and opens a calendar in a popup.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/DatePicker.tsx)

## Overview

A date picker is a button that shows the selected date and opens a calendar in a popup.

Use it in forms where a date is one field among others. Point `aria-labelledby` at a visible label.

## Examples

### Basic

```tsx
import { DatePicker } from '@tempoxyz/ds'

export function Demo() {
  return (
    <DatePicker.Root>
      <DatePicker.Trigger />
      <DatePicker.Popup>
        <DatePicker.Calendar />
      </DatePicker.Popup>
    </DatePicker.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/DatePicker/Basic.tsx)

### Variant

Set `variant` on `DatePicker.Trigger` to `filled` or `outlined`. It defaults to `filled`.

```tsx
import { DatePicker, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['filled', 'outlined'] as const).map((variant) => (
        <DatePicker.Root key={variant}>
          <DatePicker.Trigger variant={variant} />
          <DatePicker.Popup>
            <DatePicker.Calendar />
          </DatePicker.Popup>
        </DatePicker.Root>
      ))}
    </div>
  )
}

namespace styles {
  export const row = style({
    alignItems: 'flex-start',
    display: 'flex',
    flexWrap: 'wrap',
    gap: '6',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/DatePicker/Variant.tsx)

### Mode

Set `mode="range"` on `DatePicker.Root` to select a date range. It defaults to `single`.

```tsx
import { DatePicker } from '@tempoxyz/ds'

export function Demo() {
  return (
    <DatePicker.Root mode="range">
      <DatePicker.Trigger placeholder="Select range" />
      <DatePicker.Popup>
        <DatePicker.Calendar />
      </DatePicker.Popup>
    </DatePicker.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/DatePicker/Mode.tsx)

### Invalid

Set `aria-invalid` on `DatePicker.Trigger` to mark it invalid.

```tsx
import { DatePicker } from '@tempoxyz/ds'

export function Demo() {
  return (
    <DatePicker.Root>
      <DatePicker.Trigger aria-invalid />
      <DatePicker.Popup>
        <DatePicker.Calendar />
      </DatePicker.Popup>
    </DatePicker.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/DatePicker/Invalid.tsx)

## Guidelines

TODO: Write guidelines for DatePicker.