Flux

Appearance

Date picker ​

The date picker enables seamless date selection with navigable views for months and years, a detailed date grid, smooth visual transitions, boundary validation, and a focus on accessibility for an intuitive user experience.

MonTueWedThuFriSatSun

Required icons

angle-left
angle-right

Props

model-value: DateTime | DateTime[]
The selected value.

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

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

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

Emits

update:model-value: [DateTime | DateTime[]]
Triggered when a new value is selected.

Examples ​

Single

A single date can be selected here.

MonTueWedThuFriSatSun

<template>
    <FluxPane style="width: 330px">
        <FluxDatePicker v-model="date"/>
    </FluxPane>
</template>

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

    const date = ref(DateTime.now());
</script>

Range

A date range can be selected here.

MonTueWedThuFriSatSun

<template>
    <FluxPane style="width: 330px">
        <FluxDatePicker
            v-model="dates"
            range-mode="range"/>
    </FluxPane>
</template>

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

    const dates = ref([
        DateTime.now().minus({days: 1}),
        DateTime.now().plus({days: 1})
    ]);
</script>

Week

A week can be selected here.

MonTueWedThuFriSatSun

<template>
    <FluxPane style="width: 330px">
        <FluxDatePicker
            v-model="dates"
            range-mode="week"/>
    </FluxPane>
</template>

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

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

Month

A month can be selected here.

MonTueWedThuFriSatSun

<template>
    <FluxPane style="width: 330px">
        <FluxDatePicker
            v-model="dates"
            range-mode="month"/>
    </FluxPane>
</template>

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

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