Date Filter

Known issues:

  • availableGranularities in relativeForm has been removed. Use the availableGranularities from the Date Filter component instead.
  • Values of Relative Form filters are not validated against the platform limits for dates. If the limit is hit, no data is shown in the filter.
    • This issue may be fixed in one of the future releases.

The Date Filter component is a dropdown component that lists date filter options. You can pass allowed options and a callback function, which receives a list of the selected values when a user clicks Apply.

DateFilter Component

In the Date Filter component, you can optionally define the following:

  • The attribute values that should be selected in the filter by default

  • The format in which dates should be displayed

    To define the date format, use any value supported by the date-fns library.

    DateFilter Component with International Date Format

  • Support for time filtering.

    Only available for GoodData Cloud and GoodData.CN.

DateFilter Component

Example

In the following example, attribute values are listed and the onApply callback function is triggered when a user clicks Apply to confirm the selection.

import React, { Component } from "react";
import { DateFilter, defaultDateFilterOptions } from "@gooddata/sdk-ui-filters";
import { myDateFilterOptions } from "myDateFilterConfiguration";

import "@gooddata/sdk-ui-filters/styles/css/main.css";

const availableGranularities = [
    "GDC.time.month",
    "GDC.time.year",
    "GDC.time.quarter",
    "GDC.time.date"];

// You can either provide your custom date filter options
const dateFilterOptions = myDateFilterOptions();
// or use the default we provide
const dateFilterOptions = defaultDateFilterOptions;

export class DateFilterComponentExample extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedFilterOption: dateFilterOptions.allTime,
            excludeCurrentPeriod: false,
        };
    }

    onApply = (dateFilterOption, excludeCurrentPeriod) => {
        this.setState({
            selectedFilterOption: dateFilterOption,
            excludeCurrentPeriod,
        });
        // eslint-disable-next-line no-console
        console.log(
            "DateFilterExample onApply",
            "selectedFilterOption:",
            dateFilterOption,
            "excludeCurrentPeriod:",
            excludeCurrentPeriod,
        );
    };

    render() {
        return (
            <div style={{ width: 300 }}>
                <DateFilter
                    excludeCurrentPeriod={this.state.excludeCurrentPeriod}
                    selectedFilterOption={this.state.selectedFilterOption}
                    filterOptions={dateFilterOptions}
                    availableGranularities={availableGranularities}
                    customFilterName="Date filter name"
                    dateFilterMode="active"
                    dateFormat="M/d/yy"
                    onApply={this.onApply}
                />
            </div>
        );
    }
}

NOTE: For the complete source code, see Live Examples.

Properties

NameRequired?TypeDescription
excludeCurrentPeriodtruebooleanThe state of the “Exclude current period” checkbox
selectedFilterOptiontrueDateFilterOptionThe selected filter option
filterOptionstrueDateFilterOptionsAvailable filter options
availableGranularitiestrueDateFilterGranularity[]An array of available types of granularity for the Relative Form
customFilterNamefalsestringA custom filter label
dateFilterModetruestringFilter mode; can be readonly, hidden, or active
dateFormatfalsestringDate format. Defaults to MM/dd/yyyy. For the supported values, see the date-fns library.
customIconfalseIFilterButtonCustomIconA custom icon with associated tooltip information.
FilterConfigurationComponentfalseComponentA component to be rendered when the configuration button is clicked.
backendfalseIAnalyticalBackendThe object with the configuration related to communication with the backend and access to analytical workspaces
workspacefalsestringThe workspace ID
isTimeForAbsoluteRangeEnabledfalsebooleanDetermine whether the static period form allows the user to set also the time of the date range or only the date.
localefalsestringThe localization of the component. Defaults to en-US.
onApplytrueFunctionA callback when the selection is confirmed by the user
onCancelfalseFunctionA callback when the selection is canceled by the user
onOpenfalseFunctionA callback when the filter dropdown is opened by the user
onClosefalseFunctionA callback when the filter dropdown is closed by the user