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

# AwFilterDateRange

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

The `AwFilterDateRange` component is a date range filter with calendar picker that syncs with URL query parameters. It displays the selected date range in the button label and provides reset functionality.

## Overview

`AwFilterDateRange` provides a date range filter with:
- Calendar-based date range selection
- URL query parameter synchronization (start and end dates)
- Formatted date range display in button label
- Default date range support
- Optional reset functionality
- Icon support in filter button
- Automatic page and search param cleanup
- Custom date format support

## Usage

### Basic Example

```markup
<AwFilterDateRange
    start-param="start_date"
    end-param="end_date"
    label="Date Range"
/>
```

### With Icon

```markup
<AwFilterDateRange
    start-param="from"
    end-param="to"
    label="Period"
    icon="calendar"
/>
```

### With Default Date Range

```markup
<AwFilterDateRange
    start-param="start_date"
    end-param="end_date"
    label="Date"
    :default-date-range="{
        start_date: '2024-01-01',
        end_date: '2024-12-31'
    }"
/>
```

### Custom Date Format

```markup
<AwFilterDateRange
    start-param="start"
    end-param="end"
    label="Dates"
    date-format="DD/MM/YYYY"
/>
```

### Without Reset Button

```markup
<AwFilterDateRange
    start-param="start_date"
    end-param="end_date"
    label="Date Range"
    no-reset
/>
```

### Custom Calendar

```markup
<AwFilterDateRange
    start-param="start_date"
    end-param="end_date"
    label="Custom Range"
>
    <template #calendar>
        <AwCalendar
            v-model="dateValue"
            output-format="YYYY-MM-DD"
            range
            :min-date="minDate"
            :max-date="maxDate"
        />
    </template>
</AwFilterDateRange>
```

### Custom Reset Slot

```markup
<AwFilterDateRange
    start-param="start_date"
    end-param="end_date"
    label="Date Range"
>
    <template #reset="{ reset }">
        <hr style="margin: 0.25rem 0" />
        <AwDropdownButton @click="reset">
            <AwIcon name="refresh" class="mr-2" />
            Clear Dates
        </AwDropdownButton>
    </template>
</AwFilterDateRange>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| startParam | Query parameter key for start date | `String` | `false` | `'start_date'` |
| endParam | Query parameter key for end date | `String` | `false` | `'end_date'` |
| icon | Icon name to display in button | `String` | `false` | `''` |
| label | Filter button label (shown when no range selected) | `String` | `false` | `'Dates'` |
| dateFormat | Date format for query params and calendar | `String` | `false` | `'YYYY-MM-DD'` |
| defaultDateRange | Default date range object with startParam and endParam keys | `Object` | `false` | `null` |
| noReset | Hide reset button | `Boolean` | `false` | `false` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| label | Custom filter button label | - | Formatted range or label prop |
| dropdown | Complete dropdown replacement | `{ isVisible, open, close, set }` | AwDropdown with calendar |
| calendar | Custom calendar component | - | AwCalendar with range mode |
| reset | Custom reset button | `{ reset }` | Reset button (conditional) |

### Events

This component does not emit custom events. It handles routing internally via `$router.replace()`.

### Data Properties

| Name | Description | Type |
|------|-------------|------|
| isVisible | Dropdown visibility state | `Boolean` |

### Computed Properties

| Name | Description |
|------|-------------|
| startValue | Start date value from URL query |
| endValue | End date value from URL query |
| value | Date range object `{ start, end }` (getter/setter) |
| isDefaultDateRange | Whether current range matches default range |
| formattedRange | Formatted date range string for button label (e.g., "Jan 1, 2024 - Dec 31, 2024") |

### Methods

| Name | Parameters | Description |
|------|------------|-------------|
| open | - | Show dropdown |
| close | - | Hide dropdown |
| set | `(val)` | Set date range value |
| reset | - | Reset to default date range or clear dates |

## Related Components

- [AwFilterChosen](./aw-filter-chosen.md) - Display active filters as chips
- [AwFilterSelect](./aw-filter-select.md) - Dropdown filter component
- [AwFilterMonth](./aw-filter-month.md) - Month filter component
- [AwCalendar](./aw-calendar.md) - Calendar component used internally
- [AwButton](../molecules/aw-button.md) - Button component used for filter trigger
- [AwDropdown](../atoms/aw-dropdown.md) - Dropdown component used internally
- [AwDropdownButton](../atoms/aw-dropdown-button.md) - Dropdown button component
- [AwIcon](../atoms/aw-icon.md) - Icon component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Button label shows formatted date range when dates are selected, otherwise shows label prop
- Formatted range uses Day.js `ll` format (e.g., "Jan 15, 2024")
- When setting dates, `page` and `search` query params are automatically removed
- Dropdown automatically closes when date range is selected
- Reset button is hidden when `noReset` is true OR when current range matches default range
- Reset functionality clears dates to `null` or restores default date range if provided
- Component uses Rambdax `omit` and `F` (false function) utilities
- Router navigation uses `.catch(F)` to suppress navigation errors
- Date format prop is passed to AwCalendar's `output-format`
- Component name is empty string in component definition (should be 'AwFilterDateRange')
- Default date range object should use same keys as `startParam` and `endParam` props
- Dropdown has `close-on-action="false"` to keep it open during date selection
- Caret icon rotates 180° when dropdown is open
- Uses `$dayjs` for date formatting (requires Day.js plugin)
- Date validation and range logic handled by AwCalendar component
- Optional chaining used for safe default date range access