TimeZone

The TimeZone selector component provides a searchable dropdown for selecting IANA timezone identifiers. Supports alias search, custom aliases, and attribute forwarding via v-bind="$attrs".

Basic Usage

Use v-model to bind the selected IANA timezone code.

<TTimeZone v-model="timezone" label="Select Timezone" />

Label & Description

Use label and description props for form labels and helper text. Clicking the label auto-focuses the input.

<TTimeZone
  v-model="timezone"
  label="Work Timezone"
  description="Used to display all time-related data"
/>

Search Filtering

Type to filter by city, timezone code, or UTC offset. Supports Chinese alias search — try Shanghai or Tokyo. Keyboard ↑↓ navigation and Enter to select.

<TTimeZone v-model="timezone" label="Search Timezone" />

Attribute Forwarding

Undeclared attributes (e.g. size, validation, prepend-text, block) are automatically forwarded to the inner TCombobox via v-bind="$attrs".

<TTimeZone v-model="timezone" label="Small size" size="sm" validation="valid" />

Custom Aliases

Inject business-specific search aliases via the custom-aliases prop. Users can find timezones by typing custom keywords.

<TTimeZone
  v-model="timezone"
  label="Search Timezone"
  :custom-aliases="{
    'Asia/Shanghai': ['mycity', 'shanghai'],
    'America/New_York': ['nyc', 'bigapple'],
  }"
/>

API

Props

Prop	Description	Type	Default
v-model	Selected IANA timezone code	string	''
label	Label text	string	undefined
description	Description text	string	undefined
placeholder	Search placeholder	string	'搜索时区...'
disabled	Disable the input	boolean	false
required	Mark as required	boolean	false
customAliases	Custom search aliases	Record<string, string[]>	{}

Forwarded Attributes

These attributes are forwarded to the inner TCombobox via v-bind="$attrs":

Attribute	Description	Type
size	Input size	'sm' | 'lg'
validation	Validation state	'valid' | 'invalid'
block	Full width	boolean
prependText	Prepended text	string
appendText	Appended text	string