# TimeZonePicker
**Also known as:** TimeZoneSelector, TimeZoneSelect, TzPicker
## Description
BitTimeZonePicker picks a time zone out of a searchable list that shows the offset from UTC, the place and the country of each one - for the time zone of a profile, a meeting or a report, and for the TimeZone of the date and time pickers. Value is a TimeZoneInfo or the IANA id of the time zone, whichever it is bound to; the list is the same on every runtime, Windows ids and renamed IANA ids are recognized, the visitor's own time zone can be preselected from the browser, and the whole field is keyboard and screen-reader operable.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Background | `BitColorKind?` | null | The color kind of the fill of the time zone picker. An explicit value wins over --bit-TimeZonePicker-background; left unset, the fill is the primary kind unless it says otherwise. |
| Border | `BitColorKind?` | null | The color kind of the frame of the time zone picker, winning over the main color of Color (which keeps the focus ring). An explicit value wins over --bit-TimeZonePicker-border-color and --bit-TimeZonePicker-hover-border-color; left unset, the frame is the primary border unless an explicit Color or those variables say otherwise. |
| Classes | `BitTimeZonePickerClassStyles?` | null | Custom CSS classes for different parts of the BitTimeZonePicker. |
| Color | `BitColor?` | null | The general color of the time zone picker: the frame takes its main color and the focus ring its focus color. An explicit value wins over --bit-TimeZonePicker-focus-color and the --bit-TimeZonePicker-* border colors (an explicit Border still wins the frame); left unset, the field is primary unless those variables say otherwise. |
| Description | `string?` | null | The description shown under the time zone picker, tied to the field through aria-describedby. |
| DescriptionTemplate | `RenderFragment?` | null | The custom template for the description of the time zone picker. |
| DetectTimeZone | `bool` | false | Preselects the time zone of the user's device when the picker has no value: the one the browser runs in, which on Blazor Server is the visitor's own rather than the server's TimeZoneInfo.Local. It is written into a bound value the way a pick in the list would be; a value the page has already set is left as it is, and so is a disabled or read-only field. |
| DropDirection | `BitDropDirection` | BitDropDirection.TopAndBottom | Determines the allowed drop directions of the time zone list callout. |
| ErrorMessage | `string?` | null | The error message shown under the time zone picker, which also puts the field in its invalid state. It is referenced through aria-describedby and announced when it appears. |
| ErrorMessageTemplate | `RenderFragment?` | null | The custom template for the error message of the time zone picker, putting the field in the same invalid state. |
| Invalid | `bool` | false | Renders the time zone picker in an invalid state without going through the validation of an EditContext. |
| IsOpen | `bool` | false | Determines the opening state of the time zone list callout. (two-way bound) |
| ItemTemplate | `RenderFragment<BitTimeZone>?` | null | The custom template for each time zone of the list. The offset the list shows for it is GetUtcOffset at the ReferenceDate, written by BitTimeZones.FormatUtcOffset. |
| Label | `string?` | null | The label of the time zone picker shown above the field, which is also the accessible name of the field and of the time zone list. |
| LabelTemplate | `RenderFragment?` | null | The custom template for the label of the time zone picker. |
| MaxHeight | `int?` | null | The maximum height of the time zone list callout in pixels. |
| NoBorder | `bool` | false | Removes the border of the time zone picker. |
| NoCountry | `bool` | false | Hides the names of the countries the time zones are in, which the list otherwise shows beside each place. |
| NoOffset | `bool` | false | Hides the offsets from UTC of the time zones in the field and in the list. |
| NoResultsMessage | `string?` | null | The message to show, and to announce, when the search result of the time zone list is empty. |
| NoResultsTemplate | `RenderFragment?` | null | The custom template to show when the search result of the time zone list is empty. |
| NoSearchBox | `bool` | false | Hides the search box of the time zone list. The field then answers to type-ahead instead, open or closed. |
| NoWrapNavigation | `bool` | false | Stops the keyboard navigation of the time zone list from wrapping around at its two ends. |
| OnBlur | `EventCallback<FocusEventArgs>` | | The callback that is invoked when the field loses focus. |
| OnClose | `EventCallback` | | The callback that is invoked when the time zone list callout closes. |
| OnFocus | `EventCallback<FocusEventArgs>` | | The callback that is invoked when the field receives focus. |
| OnOpen | `EventCallback` | | The callback that is invoked when the time zone list callout opens. |
| OnSearch | `EventCallback<string?>` | | The callback that is invoked when the search text of the time zone list changes. |
| Placeholder | `string?` | null | The text shown in the field while no time zone is selected. |
| PreferredTimeZones | `ICollection<string>?` | null | The time zones to pin to the top of the list, set apart from the rest of it by a rule, each written as any id BitTimeZones.Find resolves: an IANA id, an older IANA id or a Windows id. |
| ReferenceDate | `DateTimeOffset?` | null | The moment the offsets of the time zones are computed for - and the list ordered by - which is now unless it is given, so a picker for an event in the future shows the offsets that will hold then. |
| Responsive | `bool` | false | Shows the time zone list as a full height panel on small screens instead of an inline callout. |
| ResponsiveCloseButtonAriaLabel | `string?` | null | The aria-label of the close button of the responsive panel of the time zone list. |
| ResponsiveCloseIcon | `BitIconInfo?` | null | The icon of the close button of the responsive panel. Takes precedence over ResponsiveCloseIconName when both are set, and renders icons from external libraries like FontAwesome or Bootstrap Icons. |
| ResponsiveCloseIconName | `string?` | null | The icon name of the close button of the responsive panel from the Fluent UI icon set. |
| SearchBoxAriaLabel | `string?` | null | The aria-label of the search box of the time zone list. Falls back to the search box placeholder, then to a default English value. |
| SearchBoxPlaceholder | `string?` | null | The placeholder text of the search box of the time zone list. |
| SearchResultsAnnouncement | `Func<int, string?>?` | null | What a screen reader announces for the number of time zones a search term leaves in the list, in place of the default "1 time zone found" / "{count} time zones found". Returning null or an empty string keeps a count from being announced. |
| Size | `BitSize?` | null | The size of the time zone picker. An explicit value wins over the --bit-TimeZonePicker-* size variables (minimum height, font sizes, padding, row height); left unset, the field is medium unless those variables say otherwise. |
| Styles | `BitTimeZonePickerClassStyles?` | null | Custom CSS styles for different parts of the BitTimeZonePicker. |
| TimeZones | `ICollection<BitTimeZone>` | BitTimeZones.All | The list of the time zones the picker offers. A list of translated BitTimeZone instances is how the names are localized, and a filtered one how the choice is narrowed down. Whatever its order, the picker shows them by their offsets from UTC. |
| Title | `string?` | null | The tooltip (title attribute) of the time zone picker. |
| Underlined | `bool` | false | Renders the time zone picker with only a bottom border instead of a full one. |
| ValueTemplate | `RenderFragment<BitTimeZone?>?` | null | The custom template for the content of the field, receiving the selected time zone (null while none is). |
| DefaultValue | `TValue?` | null | The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback. |
| DisplayName | `string?` | null | Gets or sets the display name for this field. |
| InputHtmlAttributes | `IReadOnlyDictionary<string, object>?` | null | Gets or sets a collection of additional attributes that will be applied to the created element. |
| Name | `string?` | null | Gets or sets the name of the element. Allows access by name from the associated form. |
| NoValidate | `bool` | false | Disables the validation of the input. |
| OnChange | `EventCallback<TValue?>` | | Callback for when the input value changes. |
| ReadOnly | `bool` | false | Makes the input read-only. |
| Required | `bool` | false | Makes the input required. |
| Value | `TValue?` | null | Gets or sets the value of the input. This should be used with two-way binding. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| Disabled | `bool` | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| SelectedTimeZone | `BitTimeZone?` | | The time zone of the list the current value stands for, or null while there is none. |
| OpenAsync | `Task` | | Opens the time zone list. It does nothing while the field is disabled or read-only. |
| CloseAsync | `Task` | | Closes the time zone list. |
| SelectTimeZoneAsync | `Task` | | Selects the time zone an id (an IANA id, an older IANA id or a Windows id) or a TimeZoneInfo stands for, exactly as picking it in the list would, so the same events fire. One the list does not offer is not selected. |
| InputElement | `ElementReference` | | The ElementReference of the input element. |
| FocusAsync() | `() => ValueTask` | | Gives focus to the input element. |
| FocusAsync(bool preventScroll) | `(bool preventScroll) => ValueTask` | | Gives focus to the input element. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitColorKind Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | The primary color kind. |
| Secondary | 1 | The secondary color kind. |
| Tertiary | 2 | The tertiary color kind. |
| Transparent | 3 | The transparent color kind. |
### BitDropDirection Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| All | 0 | The direction determined automatically based on the available spaces in all directions. |
| TopAndBottom | 1 | The direction determined automatically based on the available spaces in only top and bottom directions. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitTimeZonePickerClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitTimeZonePicker. |
| Label | `string?` | null | Custom CSS classes/styles for the label of the BitTimeZonePicker. |
| Field | `string?` | null | Custom CSS classes/styles for the field (the button that opens the time zone list) of the BitTimeZonePicker. |
| Text | `string?` | null | Custom CSS classes/styles for the content of the field (the offset and the name of the selected time zone, or the placeholder) of the BitTimeZonePicker. |
| Offset | `string?` | null | Custom CSS classes/styles for the offset from UTC of the time zones in the field and in the list of the BitTimeZonePicker. |
| Caret | `string?` | null | Custom CSS classes/styles for the caret down element of the field of the BitTimeZonePicker. |
| ErrorMessageContainer | `string?` | null | Custom CSS classes/styles for the container of the error message of the BitTimeZonePicker. |
| ErrorMessage | `string?` | null | Custom CSS classes/styles for the error message of the BitTimeZonePicker. |
| DescriptionContainer | `string?` | null | Custom CSS classes/styles for the container of the description of the BitTimeZonePicker. |
| Description | `string?` | null | Custom CSS classes/styles for the description of the BitTimeZonePicker. |
| Overlay | `string?` | null | Custom CSS classes/styles for the overlay of the time zone list of the BitTimeZonePicker. |
| Callout | `string?` | null | Custom CSS classes/styles for the callout of the time zone list of the BitTimeZonePicker. |
| SearchBox | `string?` | null | Custom CSS classes/styles for the search box of the time zone list of the BitTimeZonePicker. |
| ScrollContainer | `string?` | null | Custom CSS classes/styles for the scroll container of the time zone list of the BitTimeZonePicker. |
| List | `string?` | null | Custom CSS classes/styles for the list (the listbox element) of the BitTimeZonePicker. |
| Item | `string?` | null | Custom CSS classes/styles for each item of the time zone list of the BitTimeZonePicker. |
| ItemName | `string?` | null | Custom CSS classes/styles for the name of each item of the time zone list of the BitTimeZonePicker. |
| ItemCountry | `string?` | null | Custom CSS classes/styles for the country name of each item of the time zone list of the BitTimeZonePicker. |
| NoResults | `string?` | null | Custom CSS classes/styles for the no results message of the time zone list of the BitTimeZonePicker. |
| ResponsiveLabelContainer | `string?` | null | Custom CSS classes/styles for the label container of the responsive panel of the time zone list of the BitTimeZonePicker. |
| ResponsiveLabel | `string?` | null | Custom CSS classes/styles for the label of the responsive panel of the time zone list of the BitTimeZonePicker. |
| ResponsiveCloseButton | `string?` | null | Custom CSS classes/styles for the close button of the responsive panel of the time zone list of the BitTimeZonePicker. |
| ResponsiveCloseIcon | `string?` | null | Custom CSS classes/styles for the icon of the close button of the responsive panel of the time zone list of the BitTimeZonePicker. |
### BitTimeZone Properties
A time zone of the IANA time zone database. BitTimeZones holds one shared instance per time zone in All, and resolves an IANA id, an older IANA id, a Windows id or a TimeZoneInfo back to it through Find.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Id | `string` | | The canonical IANA id of the time zone (America/Los_Angeles). |
| Name | `string` | | The name of the place the time zone is named after (Los Angeles), which the picker shows and searches. |
| CountryCode | `string?` | null | The ISO 3166-1 alpha-2 code of the country the time zone is in, or null for UTC. |
| CountryName | `string?` | null | The name of the country the time zone is in, shown beside the Name and searched as well. Unless it is given, it is the name BitCountries carries for the CountryCode. |
| WindowsId | `string?` | null | The Windows id the time zone maps to (Pacific Standard Time), from the CLDR mapping, or null for one Windows has none for. |
| TimeZoneInfo | `TimeZoneInfo?` | | The TimeZoneInfo of the time zone on the running runtime, or null where the runtime knows nothing of it. It is looked up by the IANA id, then by the older ids, then by the WindowsId. |
| GetUtcOffset(DateTimeOffset at) | `TimeSpan?` | | The offset from UTC the time zone is at, at the given moment, daylight saving time included. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-TimeZonePicker-background` | --bit-clr-bg-pri | Fill of the field. The Background parameter wins over it. |
| `--bit-TimeZonePicker-color` | --bit-clr-fg-pri | Name of the selected time zone in the field. |
| `--bit-TimeZonePicker-placeholder-color` | --bit-clr-fg-sec | Placeholder of the field and of the search box. |
| `--bit-TimeZonePicker-border-color` | --bit-clr-brd-pri | Frame at rest. The Border and Color parameters win over it. |
| `--bit-TimeZonePicker-hover-border-color` | --bit-clr-brd-pri-hover | Frame under a pointer, on devices that can hover. The Border and Color parameters win over it. |
| `--bit-TimeZonePicker-border-width` | --bit-shp-brd-width | Thickness of the frame. |
| `--bit-TimeZonePicker-radius` | --bit-shp-radius-control | Corner radius of the frame. |
| `--bit-TimeZonePicker-min-height` | --bit-siz-ctrl-md | Smallest height of the frame. The Size parameter wins over it. |
| `--bit-TimeZonePicker-font-size` | --bit-tpg-fs-sm | Text size of the field and of the time zone list. The Size parameter wins over it. |
| `--bit-TimeZonePicker-padding` | 0 --bit-siz-ctrl-pad-x-md | Padding of the field. The Size parameter wins over it. |
| `--bit-TimeZonePicker-focus-color` | --bit-clr-pri-focus | Focused frame and focus ring, and the keyboard cues of the active row and the close button of the list. The Color parameter wins over it. While it is unset, the focus ring is the library's own --bit-shd-focus-ring, so replacing that token re-shapes it too. |
| `--bit-TimeZonePicker-invalid-color` | --bit-clr-err / --bit-clr-err-focus | Frame, focus ring and error message of a rejected value. |
| `--bit-TimeZonePicker-disabled-color` | --bit-clr-fg-dis | Text and glyphs when disabled. |
| `--bit-TimeZonePicker-disabled-background` | --bit-clr-bg-dis | Fill when disabled. |
| `--bit-TimeZonePicker-disabled-border-color` | --bit-clr-brd-dis | Frame when disabled. |
| `--bit-TimeZonePicker-caret-color` | --bit-clr-fg-sec | The caret of the field. |
| `--bit-TimeZonePicker-offset-color` | --bit-clr-fg-sec | The offsets from UTC of the field and of the list. |
| `--bit-TimeZonePicker-label-color` | --bit-clr-fg-pri | Label text. |
| `--bit-TimeZonePicker-label-font-size` | --bit-TimeZonePicker-font-size | Label text size. The Size parameter wins over it. |
| `--bit-TimeZonePicker-label-font-weight` | --bit-tpg-field-label-font-weight | Label weight. |
| `--bit-TimeZonePicker-required-color` | --bit-clr-req | The asterisk of a Required field. |
| `--bit-TimeZonePicker-description-color` | --bit-clr-fg-sec | Description text. |
| `--bit-TimeZonePicker-footer-font-size` | --bit-tpg-fs-2xs | Text size of the description and of the error message. |
| `--bit-TimeZonePicker-callout-background` | --bit-clr-bg-pri | The surface of the time zone list. |
| `--bit-TimeZonePicker-callout-border-color` | --bit-clr-brd-pri | Border of the time zone list, and the rules under its search box and under the preferred time zones. |
| `--bit-TimeZonePicker-callout-radius` | --bit-shp-radius-popup | Corner radius of the time zone list. |
| `--bit-TimeZonePicker-callout-shadow` | --bit-shd-popup (--bit-shd-sheet for the responsive panel) | Elevation of the time zone list. |
| `--bit-TimeZonePicker-callout-max-height` | --bit-siz-popup-max-height | Tallest the scrolling list grows. The MaxHeight parameter wins over it. |
| `--bit-TimeZonePicker-responsive-width` | spacing(34) | Width of the side panel a Responsive picker opens on a small screen. |
| `--bit-TimeZonePicker-overlay-background` | transparent | The layer behind an open list; give it a color for a modal-style scrim. |
| `--bit-TimeZonePicker-item-height` | --bit-siz-item-md | Smallest height of a row of the list. The Size parameter wins over it. |
| `--bit-TimeZonePicker-item-color` | --bit-clr-fg-pri | Place name of a row, and the text of the search box. |
| `--bit-TimeZonePicker-item-hover-background` | --bit-clr-bg-pri-hover | Row under the pointer, and the row the arrow keys are on. |
| `--bit-TimeZonePicker-item-selected-background` | --bit-clr-bg-sec | The selected row. |
| `--bit-TimeZonePicker-item-selected-color` | --bit-TimeZonePicker-item-color | Text of the selected row. |
| `--bit-TimeZonePicker-item-country-color` | --bit-clr-fg-sec | Country name of a row. |
## Examples
\n**Basic**:
```razor
europeanTimeZones = [.. BitTimeZones.All.Where(z => z.Id.StartsWith("Europe/"))];
private readonly List officeTimeZones =
[
BitTimeZones.Find("America/New_York")!,
BitTimeZones.Find("Europe/London")!,
BitTimeZones.Find("Europe/Berlin")!,
BitTimeZones.Find("Asia/Tehran")!,
BitTimeZones.Find("Asia/Singapore")!,
];
```
\n**Preferred time zones**:
```razor
preferredTimeZones = ["Europe/Berlin", "Asia/Tehran", "America/New_York"];
```
\n**Search box**:
```razor
@(zone is null ? "Pick one" : $"{zone.Name} - {LocalTime(zone)}")
@LocalTime(zone)
🔍 nothing here
```
```csharp
// The time it is in a time zone right now, which is what a template can add to a row.
private static string LocalTime(BitTimeZone zone) => zone.TimeZoneInfo is { } timeZone
? TimeZoneInfo.ConvertTime(DateTimeOffset.UtcNow, timeZone).ToString("t")
: string.Empty;
```
\n**Validation**:
```razor
Submit
@if (submittedTimeZoneId is not null)
{
Toggle the list
Select Tokyo
Select UTC
Focus
controlledPicker = default!;
```
\n**Form submission**:
```razor
germanTimeZones =
[
new("Europe/Berlin", "Berlin", "DE", "W. Europe Standard Time", "Deutschland"),
new("Europe/Vienna", "Wien", "AT", "W. Europe Standard Time", "Österreich"),
new("Europe/Zurich", "Zürich", "CH", "W. Europe Standard Time", "Schweiz"),
new("Europe/Rome", "Rom", "IT", "W. Europe Standard Time", "Italien"),
new("Europe/Lisbon", "Lissabon", "PT", "GMT Standard Time", "Portugal"),
];
```
\n**Cascading parameters**:
```razor
persianTimeZones =
[
new("Asia/Tehran", "تهران", "IR", "Iran Standard Time", "ایران"),
new("Asia/Kabul", "کابل", "AF", "Afghanistan Standard Time", "افغانستان"),
new("Europe/Istanbul", "استانبول", "TR", "Turkey Standard Time", "ترکیه"),
new("Asia/Baghdad", "بغداد", "IQ", "Arabic Standard Time", "عراق"),
new("Asia/Dubai", "دبی", "AE", "Arabian Standard Time", "امارات"),
];
```
Id: @boundTimeZoneId
Id: @boundTimeZone?.Id
Display name: @boundTimeZone?.DisplayName
Time there: @(boundTimeZone is null ? null : TimeZoneInfo.ConvertTime(DateTimeOffset.UtcNow, boundTimeZone).ToString("t"))
```
```csharp
private string? boundTimeZoneId;
private TimeZoneInfo? boundTimeZone;
```
\n**DefaultValue & DetectTimeZone**:
```razor
Changed to: @changedTimeZoneId
Detected: @detectedTimeZoneId
```
```csharp
private string? changedTimeZoneId;
private string? detectedTimeZoneId;
```
\n**Custom time zones**:
```razor
Submitted: @submittedTimeZoneId
}
```
```csharp
public class BitTimeZonePickerValidationModel
{
[Required(ErrorMessage = "Select your time zone.")]
public string? TimeZoneId { get; set; }
}
private string? submittedTimeZoneId;
private readonly BitTimeZonePickerValidationModel validationModel = new();
```
\n**Disabled & ReadOnly**:
```razor
Selected time zone: @eventTimeZone?.Id
Search text: @searchedText
Callout: @calloutState
Field: @focusState
```
```csharp
private TimeZoneInfo? eventTimeZone;
private string? searchedText;
private string calloutState = "closed";
private string focusState = "blurred";
```
\n**Programmatic control**:
```razor
IsOpen: @isCalloutOpen
SelectedTimeZone: @controlledPicker?.SelectedTimeZone?.Name
```
```csharp
private bool isCalloutOpen;
private BitTimeZonePickerPosted as timeZone: @(BitTimeZones.Find(submissionTimeZone)?.Id)
```
```csharp
private TimeZoneInfo? submissionTimeZone;
```
\n**Localization**:
```razor