---
id: Date picker
section: components
cssPrefix: pf-c-date-picker
propComponents: ['DatePicker', 'CalendarFormat', 'DatePickerRef']
beta: true
---

## Examples

### Basic

```ts file="./DatePickerBasic.tsx"
```

### American format

```ts file="./DatePickerAmerican.tsx"
```

### Helper text

```ts file="./DatePickerHelperText.tsx"
```

### Min and max date

```ts file="./DatePickerMinMax.tsx"
```

### French

```ts file="./DatePickerFrench.tsx"
```

### Controlled

```ts file="./DatePickerControlled.tsx"
```

### Controlling the date picker calendar state

```ts file="./DatePickerControlledCalendar.tsx"
```