Timezone select
@xui/timezone-selectA searchable time-zone picker: the runtime's IANA zones (via Intl.supportedValuesOf('timeZone')) fed into xui-select, each labelled with its current GMT offset. The value is the selected IANA id (a string), bound with [(value)] or a form control.
Install
pnpm add @xui/timezone-select Add the barrel to a standalone component's imports:
import { XuiTimezoneSelectImports } from '@xui/timezone-select';@Component({ imports: [XuiTimezoneSelectImports], // …})Examples
Default
Loading preview…
<div class="w-72"> <xui-timezone-select /></div>Two way binding
Loading preview…
<div class="w-72"> <xui-timezone-select [(value)]="zone" /> <p class="text-foreground-muted mt-3 text-sm">Zone: {{ zone ?? '—' }}</p></div>Reactive form
Loading preview…
<div class="w-72"> <xui-timezone-select [formControl]="zone" /> <p class="text-foreground-muted mt-3 text-sm">Form value: {{ zone.value ?? '—' }}</p></div>Disabled
Loading preview…
<div class="w-72"> <xui-timezone-select disabled [(value)]="zone" /></div>API
A searchable time-zone picker: the runtime's IANA zones (via Intl.supportedValuesOf('timeZone')) fed into xui-select, each labelled with its current GMT offset. [(value)] holds the selected IANA id (a string).
Inputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''placeholderstringText shown while no zone is chosen.'Select a time zone…'aria-labelstringNames the combobox; the placeholder is only shown until something is picked.'Time zone'disabledbooleanBlock interaction and dim the control.falsedateDateReference instant used to compute offsets (defaults to "now" at first render).new Date(0)valuestring | nullThe selected IANA time-zone id. Two-way bindable with [(value)], or via formControl/ngModel.null