---
metaTitle: Date component | AwesCode UI
meta:
  - name: description
    content: The <AwDate /> component is used to render Date - UI Vue component for AwesCode UI.
title: Date
---

# AwDate

**Category:** Organism | **Import:** Dynamic

The `AwDate` component is a date input field with an integrated calendar dropdown. It combines an input field with a calendar picker, supporting single dates, date ranges, and editable text input.

## Overview

`AwDate` provides a date input solution with:
- Text input field with calendar dropdown
- Single date or date range selection
- Editable input (when format allows)
- Clear button support
- Prefix/postfix support
- Automatic calendar view sizing
- Day.js integration for date formatting

## Usage

### Basic Example

```markup
<AwDate v-model="selectedDate" label="Select Date" />
```

### With Format

```markup
<AwDate 
    v-model="selectedDate"
    format="DD.MM.YYYY"
    label="Date"
/>
```

### Date Range

```markup
<AwDate 
    v-model="dateRange"
    range
    format="DD.MM.YYYY"
    label="Date Range"
/>
```

### Clearable

```markup
<AwDate 
    v-model="selectedDate"
    clearable
    label="Date"
/>
```

### Editable Input

```markup
<AwDate 
    v-model="selectedDate"
    format="DD.MM.YYYY"
    editable
    label="Date"
/>
```

### With Prefix/Postfix

```markup
<AwDate 
    v-model="selectedDate"
    prefix="From:"
    postfix="to"
    label="Date"
/>
```

### With Min/Max

```markup
<AwDate 
    v-model="selectedDate"
    :min="minDate"
    :max="maxDate"
    label="Date"
/>
```

## API

### Props

All props from `AwCalendar` are supported, plus:

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| format | Date format string (e.g., `'DD.MM.YYYY'`) | `String` | `false` | `'ll'` |
| clearable | Show clear button when value exists | `Boolean` | `false` | `false` |
| editable | Allow manual text input (only for DMY formats) | `Boolean` | `false` | `false` |
| prefix | Prefix text shown when value exists | `String` | `false` | `''` |
| postfix | Postfix text shown when value exists | `String` | `false` | `''` |
| label | Input label | `String` | `false` | `''` |

**Calendar Props (inherited):**
- `value`, `range`, `min`, `max`, `disabledDays`, `firstDay`, `showToday`, `parseFormat`, `outputFormat`

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| prefix | Custom prefix content | - | Prefix text |
| postfix | Custom postfix content | - | Postfix text |
| All calendar slots | Same as `AwCalendar` | - | - |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| input | `Date` / `Object` | Emitted when date is selected |
| focus | `Event` | Emitted when input receives focus |
| All calendar events | - | Inherited from `AwCalendar` |

### Config Options

The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:

```javascript
export default {
  AwDate: {
    format: 'll'  // Default date format
  }
}
```

## Related Components

- `AwCalendar` - Calendar component used in dropdown
- `AwInput` - Base input component
- `AwDropdown` - Dropdown component for calendar

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Input is editable only when format contains only DMY characters and separators
- Calendar dropdown automatically adjusts number of month views based on available width
- Range selection shows two dates separated by `' - '` in input
- Uses field mixin for standard field behavior
- Uses calendar mixin for date logic
- Format string uses Day.js format tokens
- When editable, manual input is validated and parsed using format
- Dropdown closes automatically when date is selected (unless range mode)
- Clear button clears the value (sets to `null`)