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

# IPeriodRangePickerProps

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

> **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).
> 

**Signature:**

```typescript
export interface IPeriodRangePickerProps 
```

## Properties

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [customRangeHint?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrangepickerprops/index.md#iperiodrangepickerpropscustomrangehint) |  | ReactNode | **_(ALPHA)_** _(Optional)_ Extra content rendered after the built-in format hint. |
| [dateFormat?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrangepickerprops/index.md#iperiodrangepickerpropsdateformat) |  | string | **_(ALPHA)_** _(Optional)_ Date format (date-fns tokens). Formats the input fields for the "GDC.time.date" granularity, and the day-level range preview for all the others. |
| [granularity](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrangepickerprops/index.md#iperiodrangepickerpropsgranularity) |  | [PeriodRangePickerGranularity](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.periodrangepickergranularity/index.md) | **_(ALPHA)_** |
| [isMobile](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrangepickerprops/index.md#iperiodrangepickerpropsismobile) |  | boolean | **_(ALPHA)_** |
| [onRangeChange](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrangepickerprops/index.md#iperiodrangepickerpropsonrangechange) |  | (newRange: [IPeriodRange](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrange/index.md)) => void | **_(ALPHA)_** |
| [onValidityChange?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrangepickerprops/index.md#iperiodrangepickerpropsonvaliditychange) |  | (isValid: boolean) => void | **_(ALPHA)_** _(Optional)_ Reports whether the picker's fields currently form a submittable range, even while a field is empty or unparsable - unlike `onRangeChange`, which stays silent in that case. Pass a stable callback (e.g. a `useState` setter), not one that changes identity every render. |
| [range](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrangepickerprops/index.md#iperiodrangepickerpropsrange) |  | [IPeriodRange](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrange/index.md) | **_(ALPHA)_** |
| [submitForm](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrangepickerprops/index.md#iperiodrangepickerpropssubmitform) |  | () => void | **_(ALPHA)_** |
| [weekStart?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrangepickerprops/index.md#iperiodrangepickerpropsweekstart) |  | [WeekStart](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.weekstart/index.md) | **_(ALPHA)_** _(Optional)_ Which day a week starts on; only relevant when `granularity` is `"GDC.time.week_us"` or `"GDC.time.date"`. Defaults to "Sunday". |
| [withoutApply?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.iperiodrangepickerprops/index.md#iperiodrangepickerpropswithoutapply) |  | boolean | **_(ALPHA)_** _(Optional)_ |

## Property details

### IPeriodRangePickerProps.customRangeHint

> **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).
> 

Extra content rendered after the built-in format hint.

**Signature:**

```typescript
customRangeHint?: ReactNode;
```

### IPeriodRangePickerProps.dateFormat

> **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).
> 

Date format (date-fns tokens). Formats the input fields for the "GDC.time.date" granularity, and the day-level range preview for all the others.

**Signature:**

```typescript
dateFormat?: string;
```

### IPeriodRangePickerProps.granularity

> **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).
> 

**Signature:**

```typescript
granularity: PeriodRangePickerGranularity;
```

### IPeriodRangePickerProps.isMobile

> **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).
> 

**Signature:**

```typescript
isMobile: boolean;
```

### IPeriodRangePickerProps.onRangeChange

> **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).
> 

**Signature:**

```typescript
onRangeChange: (newRange: IPeriodRange) => void;
```

### IPeriodRangePickerProps.onValidityChange

> **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).
> 

Reports whether the picker's fields currently form a submittable range, even while a field is empty or unparsable - unlike `onRangeChange`, which stays silent in that case. Pass a stable callback (e.g. a `useState` setter), not one that changes identity every render.

**Signature:**

```typescript
onValidityChange?: (isValid: boolean) => void;
```

### IPeriodRangePickerProps.range

> **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).
> 

**Signature:**

```typescript
range: IPeriodRange;
```

### IPeriodRangePickerProps.submitForm

> **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).
> 

**Signature:**

```typescript
submitForm: () => void;
```

### IPeriodRangePickerProps.weekStart

> **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).
> 

Which day a week starts on; only relevant when `granularity` is `"GDC.time.week_us"` or `"GDC.time.date"`. Defaults to "Sunday".

**Signature:**

```typescript
weekStart?: WeekStart;
```

### IPeriodRangePickerProps.withoutApply

> **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).
> 

**Signature:**

```typescript
withoutApply?: boolean;
```