> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# PeriodRangePicker()

- Package: [@gooddata/sdk-ui-filters](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/index.md)
- Kind: function
- Stability: alpha
- Source: https://github.com/gooddata/gooddata-ui-sdk/blob/rel/11.64/libs/sdk-ui-filters/src/DateFilter/PeriodRangePicker/PeriodRangePicker.tsx

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

A grid picker for selecting a Week/Month/Quarter/Year period range. Renders the rc-picker panel matching [IPeriodRangePickerProps.granularity](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrangepickerprops/index.md#iperiodrangepickerpropsgranularity) and reports the resolved day-level range via `onRangeChange`.

**Signature:**

```typescript
export declare function PeriodRangePicker(props: IPeriodRangePickerProps): import("react/jsx-runtime").JSX.Element;
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| props | [IPeriodRangePickerProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrangepickerprops/index.md) |  |

**Returns:**

import("react/jsx-runtime").JSX.Element