Flux

Filter date range ​

The date range filter lets users pick a start and end date, honoring the configured minimum and maximum. It writes the selection to the filter state automatically.

WARNING

This component can only be used within a Filter.

Props

icon?: FluxIconName
The icon of the filter.

label: string
The label of the filter.

max?: DateTime
The maximum date that can be selected.

min?: DateTime
The minimum date that can be selected.

name: string
The name of the filter within the filter state.

range-mode: range | week | month
Which range mode should be used.

Snippet ​

vue
<template>
    <FluxPane style="width: max-content">
        <FluxFilter v-model="filterState">
            <FluxFilterDateRange
                icon="calendar"
                label="Date range"
                name="option"/>
        </FluxFilter>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxFilter, FluxFilterDateRange, FluxPane } from '@flux-ui/components';
    import type { FluxFilterState } from '@flux-ui/types';
    import { DateTime } from 'luxon';
    import { ref } from 'vue';

    const filterState = ref<FluxFilterState>({
        option: [
            DateTime.now().startOf('week'),
            DateTime.now().endOf('week')
        ]
    });
</script>

Used components ​