Flux

Appearance

Filter date range ​

This component provides a date-filtering functionality, allowing users to select a date range while ensuring compatibility with defined minimum and maximum constraints. It handles state updates 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')
        ],

        get resettable(): string[] {
            return [];
        },

        reset(): void {
        }
    });
</script>

Used components ​