Skip to main content

DateRangeFilter

Result
Loading...
Live Editor
<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
/>

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
/>

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'),
		},
	]}
/>

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}
		/>
	);
}

Props​