DateRangeFilter

Result

Loading...

Live Editor

<DateRangeFilter filterName="Date Range Filter" minYear={2000} maxYear={2010} onApply={(event, payload) => console.log(payload)} />

<DateRangeFilter
    filterName="Date Range Filter"
    minYear={2000}
    maxYear={2010}
    onApply={(event, payload) => console.log(payload)}
/>

With DatePickers

The useDatePickers prop will allow for more granular control over the date range filter. This prop will render two date pickers instead of the default month/year selects.

Result

Loading...

Live Editor

<DateRangeFilter filterName="Specific Dates" minYear={2000} maxYear={2010} onApply={(event, payload) => console.log(payload)} useDatePickers />

<DateRangeFilter
    filterName="Specific Dates"
    minYear={2000}
    maxYear={2010}
    onApply={(event, payload) => console.log(payload)}
    useDatePickers
/>

With preset ranges

Result

Loading...

Live Editor

<DateRangeFilter id="demo-component-with-preset-ranges" filterName="Date Range Filter" minYear={1000} maxYear={3000} onApply={(event, payload) => console.log(payload)} presets />

<DateRangeFilter
    id="demo-component-with-preset-ranges"
    filterName="Date Range Filter"
    minYear={1000}
    maxYear={3000}
    onApply={(event, payload) => console.log(payload)}
    presets
/>

With custom preset ranges

Result

Loading...

Live Editor

<DateRangeFilter id="demo-component-with-custom-preset-ranges" filterName="Date Range Filter" minYear={2000} maxYear={2020} onApply={(event, payload) => console.log(payload)} presets={[ { title: 'Those days', startDate: new Date('January 1 2005'), endDate: new Date('October 1 2006'), }, ]} />

<DateRangeFilter
    id="demo-component-with-custom-preset-ranges"
    filterName="Date Range Filter"
    minYear={2000}
    maxYear={2020}
    onApply={(event, payload) => console.log(payload)}
    presets={[
        {
            title: 'Those days',
            startDate: new Date('January 1 2005'),
            endDate: new Date('October 1 2006'),
        },
    ]}
/>

Statefully Manage DateRangeFilter with Date Objects

Result

Loading...

Live Editor

function Example() { const [value, setValue] = React.useState({ startDate: new Date('January 1 2005'), endDate: new Date('October 1 2006'), }); return ( <DateRangeFilter id="demo-component-dates" filterName="Date Range Filter" minYear={2000} maxYear={2010} onApply={(event, payload) => { setValue(payload.value); }} value={value} /> ); }

function Example() {
    const [value, setValue] = React.useState({
        startDate: new Date('January 1 2005'),
        endDate: new Date('October 1 2006'),
    });

    return (
        <DateRangeFilter
            id="demo-component-dates"
            filterName="Date Range Filter"
            minYear={2000}
            maxYear={2010}
            onApply={(event, payload) => {
                setValue(payload.value);
            }}
            value={value}
        />
    );
}

Props