# Class DateRangeFilterTile
Date Range Filter Tile component for filtering data by date range.
# Example
Vue example of configuring the date min max values and handling onChange event.
<template>
<DateRangeFilterTile
:title="dateRangeFilter.title"
:datasource="dateRangeFilter.dataSource"
:attribute="dateRangeFilter.attribute"
:filter="dateRangeFilter.filter"
:onChange="dateRangeFilter.onChange"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { DateRangeFilterTile, type DateRangeFilterTileProps } from '@sisense/sdk-ui-vue';
import { filterFactory } from '@sisense/sdk-data';
import * as DM from '../assets/sample-retail-model';
const dateRangeFilterValue = ref<Filter | null>(filterFactory.dateRange(DM.DimDate.Date.Years));
const dateRangeFilter = ref<DateRangeFilterTileProps>({
title: 'Date Range',
attribute: DM.DimDate.Date.Years,
filter: dateRangeFilterValue.value!,
onChange(filter) {
dateRangeFilterValue.value = filter;
},
});
</script>
# Param
DateRangeFilterTile props
# Properties
# attribute
readonly
attribute?:LevelAttribute
Date level attribute the filter is based on
# datasource
readonly
datasource?:DataSource
Data source the query is run against - e.g. Sample ECommerce
If not specified, the query will use the defaultDataSource
specified in the parent Sisense Context.
# earliestDate
readonly
earliestDate?:string
Earliest allowed date for selection.
If not specified, the earliest date of the target date-level attribute will be used.
# filter
readonly
filter?:Filter
Date range filter.
# lastDate
readonly
lastDate?:string
Latest allowed date for selection.
If not specified, the latest date of the target date-level attribute will be used.
# onChange
readonly
onChange?: (filter
) =>void
Callback function that is called when the date range filter object should be updated.
# Parameters
Parameter | Type |
---|---|
filter | Filter |
# Returns
void
# parentFilters
readonly
parentFilters?:Filter
[]
List of filters this filter is dependent on.
# title
readonly
title?:string
Filter tile title