Time zone picker

This is a time zone select component designed to help users easily choose their preferred time zone from a comprehensive list of options. Users can efficiently set their time zone, ensuring that date and time-related information is accurate and synchronized with their location, making it ideal for platforms where precise time tracking and coordination are essential, such as global event scheduling, travel booking, or remote team collaboration.

Select your timezone ...

Required icons

angle-down

magnifying-glass

Props

model-value: string | null
The value of the timezone picker.

disabled?: boolean
If the timezone picker is disabled.

placeholder?: string
The placeholder of the timezone picker.

Emits

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

Example

Basic

A basic time zone picker.

Preview

Select your timezone ...

Code

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormTimeZonePicker
                v-model="timezone"
                placeholder="Select your timezone ..."/>
        </FluxPaneBody>
    </FluxPane>
</template>

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

    const timezone = ref(null);
</script>

Used components

• Form
  • Select