Flux

Appearance

Date range ​

A date range picker that allows users to select a start and end date. It displays a formatted label of the selected date range and opens a calendar flyout when clicked. The v-model value is a tuple of two Luxon DateTime objects or null.

Required icons

calendar

Props

model-value: [DateTime, DateTime] | null
The selected date range as a `[start, end]` tuple, or `null` when nothing is selected.

auto-complete?: FluxAutoCompleteType
The autocomplete attribute for the underlying input.

auto-focus?: boolean
Automatically focuses the input when mounted.

disabled?: boolean
Disables the input.

error?: string | null
Error message describing why the input is invalid. Sets aria-invalid and a red border.

is-condensed?: boolean
Renders the input in a compact style with reduced padding.

is-loading?: boolean
Marks the input as loading.

is-readonly?: boolean
Makes the input read-only. Blocks opening the picker.

is-secondary?: boolean
If the field is secondary and is rendered in an alternative style.

max?: DateTime
The maximum selectable date.

min?: DateTime
The minimum selectable date.

name?: string
The name attribute for the underlying form control.

placeholder?: string
The placeholder text when no date range is selected.

range-mode?: 'range' | 'week' | 'month'
The range selection mode.
Default: 'range'

Emits

update:model-value: [[DateTime, DateTime] | null]
Triggered when the selected date range changes.

Examples ​

Range

Free selection of a start and end date. This is the default mode.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField label="Period">
                    <FluxFormDateRangeInput v-model="value"/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxForm, FluxFormDateRangeInput, FluxFormField, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { DateTime } from 'luxon';
    import { ref } from 'vue';

    const value = ref<[DateTime, DateTime] | null>([
        DateTime.now().startOf('week'),
        DateTime.now().endOf('week')
    ]);
</script>

Week

Selects an entire week at once by setting `range-mode` to `week`.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField label="Week">
                    <FluxFormDateRangeInput
                        v-model="value"
                        range-mode="week"/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxForm, FluxFormDateRangeInput, FluxFormField, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { DateTime } from 'luxon';
    import { ref } from 'vue';

    const value = ref<[DateTime, DateTime] | null>([
        DateTime.now().startOf('week'),
        DateTime.now().endOf('week')
    ]);
</script>

Month

Selects an entire month at once by setting `range-mode` to `month`.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField label="Month">
                    <FluxFormDateRangeInput
                        v-model="value"
                        range-mode="month"/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxForm, FluxFormDateRangeInput, FluxFormField, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { DateTime } from 'luxon';
    import { ref } from 'vue';

    const value = ref<[DateTime, DateTime] | null>([
        DateTime.now().startOf('month'),
        DateTime.now().endOf('month')
    ]);
</script>

Used components ​