Date filter

import "@gooddata/sdk-ui-filters/styles/css/main.css";
import { DateFilter } from "@gooddata/sdk-ui-filters";

<DateFilter
    filterOptions={<date-filter-options>}
    selectedFilterOption={<selected-option>}
    excludeCurrentPeriod={<boolean>}
    availableGranularities={<granularities>}
    dateFilterMode={<"active" | "readonly" | "hidden">}
    onApply={<on-apply-callback>}
/>;

import { useState } from "react";
import { DateFilter, defaultDateFilterOptions, type DateFilterOption } from "@gooddata/sdk-ui-filters";
import type { DateFilterGranularity } from "@gooddata/sdk-model";

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

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

// Provide your own date filter options (IDateFilterOptionsByType), or use the defaults
const dateFilterOptions = defaultDateFilterOptions;

export const DateFilterExample = () => {
    const [selectedFilterOption, setSelectedFilterOption] = useState<DateFilterOption>(
        dateFilterOptions.allTime!,
    );
    const [excludeCurrentPeriod, setExcludeCurrentPeriod] = useState(false);

    return (
        <div style={{ width: 300 }}>
            <DateFilter
                excludeCurrentPeriod={excludeCurrentPeriod}
                selectedFilterOption={selectedFilterOption}
                filterOptions={dateFilterOptions}
                availableGranularities={availableGranularities}
                customFilterName="Date filter name"
                dateFilterMode="active"
                dateFormat="M/d/yy"
                onApply={(option, exclude) => {
                    setSelectedFilterOption(option);
                    setExcludeCurrentPeriod(exclude);
                }}
            />
        </div>
    );
};