# Date Picker

A date selection component, often combined with a calendar in a popover or input.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { DatePicker } from "coss-svelte";
</script>

<DatePicker />

```

## Anatomy

- `DatePicker`

## API Reference

### DatePicker

A date selection component, often combined with a calendar in a popover or input.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `bind:value` | `DateValue` | - | Current value for the component. Bind with `bind:value` when supported. |
| `bind:open` | `boolean` | `false` | Open state for the popup or disclosure. Bind with `bind:open`. |
| `locale` | `string` | `"en-US"` | Locale used for deterministic numeric parsing and formatting. |
| `label` | `string` | `"Pick a date"` | Accessible label or fallback visible label for the control. |
| `previousMonthLabel` | `string` | `"Previous month"` | Accessible label for the previous-month navigation button. |
| `nextMonthLabel` | `string` | `"Next month"` | Accessible label for the next-month navigation button. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Bits UI DatePicker.Root and Bits UI DatePicker.Trigger](https://bits-ui.com/docs/components/date-picker#root).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | compound |
| Category | Selection & Input |
| Particles | 9 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/date-picker.json` for the complete local file and dependency closure.
- Date Picker is stable in the current source catalog.