## Import
```jsx
import { DatePicker as DatePicker } from "@cfa/react-core";
import { UNSTABLE_DateField } from "@cfa/react-core";
```
## Live Editor
```jsx
```
## Examples
### Basic Usage
The most common way to use DatePicker is with the composite component.
```jsx
```
### Composable Usage
For more control, use the individual subcomponents.
```jsx
Date of Birth
The date you were born.
```
### Controlled Usage
Control the date value from a parent component.
```jsx
function ControlledExample() {
const [date, setDate] = React.useState(null);
return (
<>
Selected: {date ? date.toString() : "none"}
);
}
```
### Date Ranges
Set minimum and maximum dates to restrict selection.
```jsx
```
### Disabled Dates
Disable specific dates using the `isDateUnavailable` prop. The example below disables the weekends.
```jsx
isWeekend(date, "en-US")}
/>
```
### Date Highlighting
Highlight specific dates in the calendar using the `isDateHighlighted` prop. This example highlights the 1st and 15th of each month.
```jsx
date.day === 1 || date.day === 15}
/>
```
### Validation States
The DatePicker component supports different validation states.
```jsx
```
### Date and Time
Use different granularities for date and time selection.
```jsx
```
### Calendar Customizations
Customize the calendar display by changing the first day of week and the number of visible months.
```jsx
```
### Compact Variant
For smaller spaces, use the compact variant.
```jsx
```
## Props
### DateField.Root
| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| compact | `boolean` | - | - |
| description | `string` | - | - |
| errorMessage | `string \ | ((validation: ValidationResult) => string)` | - | - |
| isDateHighlighted | `(date: T) => boolean` | - | - |
| isInvalid | `boolean` | - | Whether the input value is invalid. |
| isReadOnly | `boolean` | - | Whether the input can be selected but not changed by the user. |
| label | `string` | - | - |
| style | `CSSProperties` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| autoComplete | `string` | - | Describes the type of autocomplete functionality the input should provide if any. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). |
| autoFocus | `boolean` | - | Whether the element should receive focus on render. |
| children | `ChildrenOrFunction` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction` | `'react-aria-DatePicker'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| defaultOpen | `boolean` | - | Whether the overlay is open by default (uncontrolled). |
| defaultValue | `DateValue` | - | The default value (uncontrolled). |
| dir | `string` | - | - |
| firstDayOfWeek | `"sun" \ | "mon" \ | "tue" \ | "wed" \ | "thu" \ | "fri" \ | "sat"` | - | The day that starts the week. |
| form | `string` | - | The \`\