import './DatePicker.css'

## Examples

### Basic


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Helper text


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Invalid


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Expanded


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Custom width input


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Custom width input based on number of characters


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

## Documentation

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-date-picker` | `<div>` | Initiates the date picker component. **Required** |
| `.pf-v6-c-date-picker__input` | `<div>` | Initiates the date picker input container. **Required** |
| `.pf-v6-c-date-picker__helper-text` | `<div>` | Initiates the date picker helper text. |
| `.pf-v6-c-date-picker__calendar` | `<div>` | Initiates an optional date picker calendar container. **Note:** Required in the react date picker component. |
| `.pf-m-top` | `.pf-v6-c-date-picker` | Modifies to display the calendar above the date picker. |
| `.pf-m-align-right` | `.pf-v6-c-date-picker__calendar` | Modifies the calendar to align the calendar to the right edge of the date picker. |
| `.pf-m-static` | `.pf-v6-c-date-picker__calendar` | Modifies the calendar to be statically positioned to support custom positioning. |