> ## Documentation Index
> Fetch the complete documentation index at: https://docs.morph-data.io/llms.txt
> Use this file to discover all available pages before exploring further.

# <DatePicker />

<Frame>
  <iframe height={500} width="100%" src="https://morph-data-components-storybook.netlify.app/iframe.html?args=&globals=&id=input-components-date-picker--date-picker-story" />
</Frame>

`<DatePicker>` は、`defineState()` 関数で宣言した状態に、日付を入力するためのコンポーネントです。

```tsx theme={"dark"}
import { defineState } from '@morph-data/components';

export const { date } = defineState({ date: undefined });

<DatePicker state={date} />
```

## プロパティ

<ParamField path="state" type="State" required>
  コンポーネントの入力値をバインドするStateオブジェクト。 `defineState()` 関数で宣言した状態を指定してください。
</ParamField>