---
alias: fc.daterange.wrapper.forwarder
aliases:
  - fc.daterange.wrapper.forwarder
category: filter
module: Core
---

# fc.daterange.wrapper.forwarder

Wrapper that captures date range selections and forwards them as URL query parameters, enabling date-filtered navigation and data fetching.

## When to Use
- Forward user-selected date range values to URL parameters for downstream components
- Add date range filtering to dashboard pages where charts/lists read dates from URL
- Customize the URL parameter names used for from/to date values

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `keyConfig` | `{ from: string; to: string }` | No | Maps date range values to URL parameter names (default: `{ from: 'from', to: 'to' }`) |

## Data Binding
Forwards the selected date range values into URL query parameters. Child components and page queries that reference these URL parameters will automatically receive the filtered date range.

## Descendants
Yes -- wraps child components that should respond to the date range selection. Typically wraps chart and list wrapper components.

## Composition Patterns
- `fc.page` > `fc.daterange.wrapper.forwarder` > `fc.chart.bar.wrapper.source` for time-filtered charts
- `fc.page` > `fc.daterange.wrapper.forwarder` > `fc.list.wrapper.source` for time-filtered lists
- Combine with `fc.chart.gauge.wrapper.threshold` (which reads `timeFilterKey` from URL)

## Gotchas
- Default URL parameter names are `from` and `to` -- override with `keyConfig` if your page query uses different parameter names
- This component provides the date range picker UI and forwards values to the URL -- it does not directly filter data
- Child components must read from URL parameters (or use `timeFilterKey`) for the filtering to take effect

## Manifest Example
```json
{
  "component": "fc.daterange.wrapper.forwarder",
  "props": {
    "keyConfig": {
      "from": "startDate",
      "to": "endDate"
    }
  }
}
```

## AI Parse Notes
- **Primary intent:** Declarative Mystique component definition for manifests.
- **Selection signals:** Match by `alias`, category, and required `Key Props`.
- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
- **Safety checks:** Validate required props and data bindings before manifest generation.
