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

# IDashboardDateFilterProps

- Package: [@gooddata/sdk-ui-dashboard](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/index.md)
- Kind: interface
- Source: https://github.com/gooddata/gooddata-ui-sdk/blob/rel/11.64/libs/sdk-ui-dashboard/src/presentation/filterBar/dateFilter/types.ts

**Signature:**

```typescript
export interface IDashboardDateFilterProps 
```

## Properties

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [autoOpen?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboarddatefilterprops/index.md#idashboarddatefilterpropsautoopen) |  | boolean | _(Optional)_ Specify whether should render filter with open dropdown |
| [ButtonComponent?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboarddatefilterprops/index.md#idashboarddatefilterpropsbuttoncomponent) |  | ComponentType<[IDateFilterButtonProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-filters/sdk-ui-filters.idatefilterbuttonprops/index.md)> | **_(ALPHA)_** _(Optional)_ Specify custom button component |
| [config](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboarddatefilterprops/index.md#idashboarddatefilterpropsconfig) |  | [IDashboardDateFilterConfig](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboarddatefilterconfig/index.md) | Additional DateFilter configuration. |
| [customRangeHint?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboarddatefilterprops/index.md#idashboarddatefilterpropscustomrangehint) |  | ReactNode | **_(ALPHA)_** _(Optional)_ Custom content rendered at the end of the hint area of the static period (absolute range) form, after the default date/time format hints. |
| [filter](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboarddatefilterprops/index.md#idashboarddatefilterpropsfilter) |  | [IDashboardDateFilter](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.idashboarddatefilter/index.md) \| undefined | Definition of filter to render. |
| [isDraggable?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboarddatefilterprops/index.md#idashboarddatefilterpropsisdraggable) |  | boolean | _(Optional)_ Specify whether dragging handle and grab cursor should be displayed on hover |
| [onFilterChanged](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboarddatefilterprops/index.md#idashboarddatefilterpropsonfilterchanged) |  | (filter: [IDashboardDateFilter](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.idashboarddatefilter/index.md) \| undefined, dateFilterOptionLocalId?: string, isWorkingSelectionChange?: boolean) => void | When the user interacts with the filter and changes its value, it MUST use this callback to propagate the new filter value. |
| [overlayPositionType?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboarddatefilterprops/index.md#idashboarddatefilterpropsoverlaypositiontype) |  | OverlayPositionType | _(Optional)_ Specifies the overlay position type for the date filter dropdown. |
| [readonly?](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboarddatefilterprops/index.md#idashboarddatefilterpropsreadonly) |  | boolean | _(Optional)_ Specify whether the filter should be readonly. |
| [workingFilter](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboarddatefilterprops/index.md#idashboarddatefilterpropsworkingfilter) |  | [IDashboardDateFilter](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.idashboarddatefilter/index.md) \| undefined | Definition of working filter used to render selected options. |

## Property details

### IDashboardDateFilterProps.autoOpen

Specify whether should render filter with open dropdown

**Signature:**

```typescript
autoOpen?: boolean;
```

### IDashboardDateFilterProps.ButtonComponent

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

Specify custom button component

**Signature:**

```typescript
ButtonComponent?: ComponentType<IDateFilterButtonProps>;
```

### IDashboardDateFilterProps.config

Additional DateFilter configuration.

**Signature:**

```typescript
config: IDashboardDateFilterConfig;
```

### IDashboardDateFilterProps.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).
> 

Custom content rendered at the end of the hint area of the static period (absolute range) form, after the default date/time format hints.

**Signature:**

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

### IDashboardDateFilterProps.filter

Definition of filter to render.

**Signature:**

```typescript
filter: IDashboardDateFilter | undefined;
```

### IDashboardDateFilterProps.isDraggable

Specify whether dragging handle and grab cursor should be displayed on hover

**Signature:**

```typescript
isDraggable?: boolean;
```

### IDashboardDateFilterProps.onFilterChanged

When the user interacts with the filter and changes its value, it MUST use this callback to propagate the new filter value.

**Signature:**

```typescript
onFilterChanged: (filter: IDashboardDateFilter | undefined, dateFilterOptionLocalId?: string, isWorkingSelectionChange?: boolean) => void;
```

### IDashboardDateFilterProps.overlayPositionType

Specifies the overlay position type for the date filter dropdown.

**Signature:**

```typescript
overlayPositionType?: OverlayPositionType;
```

### IDashboardDateFilterProps.readonly

Specify whether the filter should be readonly.

**Signature:**

```typescript
readonly?: boolean;
```

### IDashboardDateFilterProps.workingFilter

Definition of working filter used to render selected options.

**Signature:**

```typescript
workingFilter: IDashboardDateFilter | undefined;
```