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…'ariaLabelstringNames 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