Flux

Appearance

Date time ​

An input element designed for selecting dates and times, 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-hour-only?: string
Always round the time to whole hours.

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.

Examples ​

Basic

A basic date time input.

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

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

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

Hour only

A date time input where the time is always rounded to whole hours.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField label="Starts on">
                    <FluxFormDateTimeInput
                        v-model="value"
                        is-hour-only/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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

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

Used components ​