Flux

Appearance

Date ​

An input element designed for selecting dates, incorporating a dropdown interface with a calendar for ease of use. Provides support for configurable options such as minimum and maximum date ranges.

Required icons

angle-left
angle-right
calendar

Props

model-value: DateTime | null
The value.

auto-complete?: FluxAutoCompleteType
Please refer to the HTMLInputElement documentation for examples of values that can be given here.

auto-focus?: boolean
Focus the input when the form is mounted.

disabled?: boolean
Disable the form input.

is-readonly?: string
Make the form input read-only.

max?: DateTime
The maximum selectable date.

min?: DateTime
The minimum selectable date.

placeholder?: string
The placeholder that is visible in the form input.

Emits

update:model-value: [DateTime | null]
Triggered when the value is changed.

blur: []
Triggered when the input loses focus.

focus: []
Triggered when the input receives focus.

Examples ​

Basic

A basic date input.

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

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

    const value = ref(DateTime.fromSQL('1996-03-13'));
</script>

Limited

A date input with a minimal and maximum value.

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

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

    const min = ref(DateTime.fromSQL('1970-01-01'));
    const max = ref(DateTime.now());

    const value = ref(DateTime.fromSQL('1996-03-13'));
</script>

Used components ​