Input Time Zone

Input Time Zone is an input-driven component containing a list of worldwide time zones.

Overview

Input Time Zone enables a user to select a time zone. Where no value is provided, the user's time zone will be selected by default.

Usage

  • Choosing a time zone

Sample

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus in and out of the component.
Tab and ShiftMoves focus in and out of the component.
Arrow downWhen the component is not open, opens the component. When open, focus shifts to the next value.
Arrow upWhen the component is open, focus shifts to the previous value.
HomeWhen the component is open, focus shifts to the first value.
EndWhen the component is open, focus shifts to the last value.
EscWhen the component is open, closes the component and shifts focus back to the input.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
clearableclearableWhen true, an empty value (null) will be allowed as a value. When false, an offset or name value is enforced, and clearing the input or blurring will restore the last valid value.booleanfalse
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
formformThe id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.string
maxItemsmax-itemsSpecifies the component's maximum number of options to display before displaying a scrollbar.number0
messageOverridesUse this property to override individual strings used by the component.{ chooseTimeZone?: string; offsetPlaceholder?: string; regionPlaceholder?: string; namePlaceholder?: string; timeZoneLabel?: string; timeZoneRegionLabel?: string; "Africa/Abidjan"?: string; "Africa/Algiers"?: string; "Africa/Bissau"?: string; "Africa/Cairo"?: string; "Africa/Casablanca"?: string; "Africa/Ceuta"?: string; "Africa/El_Aaiun"?: string; "Africa/Johannesburg"?: string; "Africa/Juba"?: string; "Africa/Khartoum"?: string; "Africa/Lagos"?: string; "Africa/Maputo"?: string; "Africa/Monrovia"?: string; "Africa/Nairobi"?: string; "Africa/Ndjamena"?: string; "Africa/Sao_Tome"?: string; "Africa/Tripoli"?: string; "Africa/Tunis"?: string; "Africa/Windhoek"?: string; "America/Adak"?: string; "America/Anchorage"?: string; "America/Araguaina"?: string; "America/Argentina/Buenos_Aires"?: string; "America/Argentina/Catamarca"?: string; "America/Argentina/Cordoba"?: string; "America/Argentina/Jujuy"?: string; "America/Argentina/La_Rioja"?: string; "America/Argentina/Mendoza"?: string; "America/Argentina/Rio_Gallegos"?: string; "America/Argentina/Salta"?: string; "America/Argentina/San_Juan"?: string; "America/Argentina/San_Luis"?: string; "America/Argentina/Tucuman"?: string; "America/Argentina/Ushuaia"?: string; "America/Asuncion"?: string; "America/Bahia"?: string; "America/Bahia_Banderas"?: string; "America/Barbados"?: string; "America/Belem"?: string; "America/Belize"?: string; "America/Boa_Vista"?: string; "America/Bogota"?: string; "America/Boise"?: string; "America/Cambridge_Bay"?: string; "America/Campo_Grande"?: string; "America/Cancun"?: string; "America/Caracas"?: string; "America/Cayenne"?: string; "America/Chicago"?: string; "America/Chihuahua"?: string; "America/Ciudad_Juarez"?: string; "America/Costa_Rica"?: string; "America/Cuiaba"?: string; "America/Danmarkshavn"?: string; "America/Dawson"?: string; "America/Dawson_Creek"?: string; "America/Denver"?: string; "America/Detroit"?: string; "America/Edmonton"?: string; "America/Eirunepe"?: string; "America/El_Salvador"?: string; "America/Fort_Nelson"?: string; "America/Fortaleza"?: string; "America/Glace_Bay"?: string; "America/Goose_Bay"?: string; "America/Grand_Turk"?: string; "America/Guatemala"?: string; "America/Guayaquil"?: string; "America/Guyana"?: string; "America/Halifax"?: string; "America/Havana"?: string; "America/Hermosillo"?: string; "America/Indiana/Indianapolis"?: string; "America/Indiana/Knox"?: string; "America/Indiana/Marengo"?: string; "America/Indiana/Petersburg"?: string; "America/Indiana/Tell_City"?: string; "America/Indiana/Vevay"?: string; "America/Indiana/Vincennes"?: string; "America/Indiana/Winamac"?: string; "America/Inuvik"?: string; "America/Iqaluit"?: string; "America/Jamaica"?: string; "America/Juneau"?: string; "America/Kentucky/Louisville"?: string; "America/Kentucky/Monticello"?: string; "America/La_Paz"?: string; "America/Lima"?: string; "America/Los_Angeles"?: string; "America/Maceio"?: string; "America/Managua"?: string; "America/Manaus"?: string; "America/Martinique"?: string; "America/Matamoros"?: string; "America/Mazatlan"?: string; "America/Menominee"?: string; "America/Merida"?: string; "America/Metlakatla"?: string; "America/Mexico_City"?: string; "America/Miquelon"?: string; "America/Moncton"?: string; "America/Monterrey"?: string; "America/Montevideo"?: string; "America/New_York"?: string; "America/Nome"?: string; "America/Noronha"?: string; "America/North_Dakota/Beulah"?: string; "America/North_Dakota/Center"?: string; "America/North_Dakota/New_Salem"?: string; "America/Nuuk"?: string; "America/Ojinaga"?: string; "America/Panama"?: string; "America/Paramaribo"?: string; "America/Phoenix"?: string; "America/Port-au-Prince"?: string; "America/Porto_Velho"?: string; "America/Puerto_Rico"?: string; "America/Punta_Arenas"?: string; "America/Rankin_Inlet"?: string; "America/Recife"?: string; "America/Regina"?: string; "America/Resolute"?: string; "America/Rio_Branco"?: string; "America/Santarem"?: string; "America/Santiago"?: string; "America/Santo_Domingo"?: string; "America/Sao_Paulo"?: string; "America/Scoresbysund"?: string; "America/Sitka"?: string; "America/St_Johns"?: string; "America/Swift_Current"?: string; "America/Tegucigalpa"?: string; "America/Thule"?: string; "America/Tijuana"?: string; "America/Toronto"?: string; "America/Vancouver"?: string; "America/Whitehorse"?: string; "America/Winnipeg"?: string; "America/Yakutat"?: string; "Antarctica/Casey"?: string; "Antarctica/Davis"?: string; "Antarctica/Macquarie"?: string; "Antarctica/Mawson"?: string; "Antarctica/Palmer"?: string; "Antarctica/Rothera"?: string; "Antarctica/Troll"?: string; "Asia/Almaty"?: string; "Asia/Amman"?: string; "Asia/Anadyr"?: string; "Asia/Aqtau"?: string; "Asia/Aqtobe"?: string; "Asia/Ashgabat"?: string; "Asia/Atyrau"?: string; "Asia/Baghdad"?: string; "Asia/Baku"?: string; "Asia/Bangkok"?: string; "Asia/Barnaul"?: string; "Asia/Beirut"?: string; "Asia/Bishkek"?: string; "Asia/Chita"?: string; "Asia/Choibalsan"?: string; "Asia/Colombo"?: string; "Asia/Damascus"?: string; "Asia/Dhaka"?: string; "Asia/Dili"?: string; "Asia/Dubai"?: string; "Asia/Dushanbe"?: string; "Asia/Famagusta"?: string; "Asia/Gaza"?: string; "Asia/Hebron"?: string; "Asia/Ho_Chi_Minh"?: string; "Asia/Hong_Kong"?: string; "Asia/Hovd"?: string; "Asia/Irkutsk"?: string; "Asia/Jakarta"?: string; "Asia/Jayapura"?: string; "Asia/Jerusalem"?: string; "Asia/Kabul"?: string; "Asia/Kamchatka"?: string; "Asia/Karachi"?: string; "Asia/Kathmandu"?: string; "Asia/Khandyga"?: string; "Asia/Kolkata"?: string; "Asia/Krasnoyarsk"?: string; "Asia/Kuching"?: string; "Asia/Macau"?: string; "Asia/Magadan"?: string; "Asia/Makassar"?: string; "Asia/Manila"?: string; "Asia/Nicosia"?: string; "Asia/Novokuznetsk"?: string; "Asia/Novosibirsk"?: string; "Asia/Omsk"?: string; "Asia/Oral"?: string; "Asia/Pontianak"?: string; "Asia/Pyongyang"?: string; "Asia/Qatar"?: string; "Asia/Qostanay"?: string; "Asia/Qyzylorda"?: string; "Asia/Riyadh"?: string; "Asia/Sakhalin"?: string; "Asia/Samarkand"?: string; "Asia/Seoul"?: string; "Asia/Shanghai"?: string; "Asia/Singapore"?: string; "Asia/Srednekolymsk"?: string; "Asia/Taipei"?: string; "Asia/Tashkent"?: string; "Asia/Tbilisi"?: string; "Asia/Tehran"?: string; "Asia/Thimphu"?: string; "Asia/Tokyo"?: string; "Asia/Tomsk"?: string; "Asia/Ulaanbaatar"?: string; "Asia/Urumqi"?: string; "Asia/Ust-Nera"?: string; "Asia/Vladivostok"?: string; "Asia/Yakutsk"?: string; "Asia/Yangon"?: string; "Asia/Yekaterinburg"?: string; "Asia/Yerevan"?: string; "Atlantic/Azores"?: string; "Atlantic/Bermuda"?: string; "Atlantic/Canary"?: string; "Atlantic/Cape_Verde"?: string; "Atlantic/Faroe"?: string; "Atlantic/Madeira"?: string; "Atlantic/South_Georgia"?: string; "Atlantic/Stanley"?: string; "Australia/Adelaide"?: string; "Australia/Brisbane"?: string; "Australia/Broken_Hill"?: string; "Australia/Darwin"?: string; "Australia/Eucla"?: string; "Australia/Hobart"?: string; "Australia/Lindeman"?: string; "Australia/Lord_Howe"?: string; "Australia/Melbourne"?: string; "Australia/Perth"?: string; "Australia/Sydney"?: string; "Etc/GMT"?: string; "Etc/GMT+1"?: string; "Etc/GMT+10"?: string; "Etc/GMT+11"?: string; "Etc/GMT+12"?: string; "Etc/GMT+2"?: string; "Etc/GMT+3"?: string; "Etc/GMT+4"?: string; "Etc/GMT+5"?: string; "Etc/GMT+6"?: string; "Etc/GMT+7"?: string; "Etc/GMT+8"?: string; "Etc/GMT+9"?: string; "Etc/GMT-1"?: string; "Etc/GMT-10"?: string; "Etc/GMT-11"?: string; "Etc/GMT-12"?: string; "Etc/GMT-13"?: string; "Etc/GMT-14"?: string; "Etc/GMT-2"?: string; "Etc/GMT-3"?: string; "Etc/GMT-4"?: string; "Etc/GMT-5"?: string; "Etc/GMT-6"?: string; "Etc/GMT-7"?: string; "Etc/GMT-8"?: string; "Etc/GMT-9"?: string; "Etc/UTC"?: string; "Europe/Andorra"?: string; "Europe/Astrakhan"?: string; "Europe/Athens"?: string; "Europe/Belgrade"?: string; "Europe/Berlin"?: string; "Europe/Brussels"?: string; "Europe/Bucharest"?: string; "Europe/Budapest"?: string; "Europe/Chisinau"?: string; "Europe/Dublin"?: string; "Europe/Gibraltar"?: string; "Europe/Helsinki"?: string; "Europe/Istanbul"?: string; "Europe/Kaliningrad"?: string; "Europe/Kirov"?: string; "Europe/Kyiv"?: string; "Europe/Lisbon"?: string; "Europe/London"?: string; "Europe/Madrid"?: string; "Europe/Malta"?: string; "Europe/Minsk"?: string; "Europe/Moscow"?: string; "Europe/Paris"?: string; "Europe/Prague"?: string; "Europe/Riga"?: string; "Europe/Rome"?: string; "Europe/Samara"?: string; "Europe/Saratov"?: string; "Europe/Simferopol"?: string; "Europe/Sofia"?: string; "Europe/Tallinn"?: string; "Europe/Tirane"?: string; "Europe/Ulyanovsk"?: string; "Europe/Vienna"?: string; "Europe/Vilnius"?: string; "Europe/Volgograd"?: string; "Europe/Warsaw"?: string; "Europe/Zurich"?: string; Factory?: string; "Indian/Chagos"?: string; "Indian/Maldives"?: string; "Indian/Mauritius"?: string; "Pacific/Apia"?: string; "Pacific/Auckland"?: string; "Pacific/Bougainville"?: string; "Pacific/Chatham"?: string; "Pacific/Easter"?: string; "Pacific/Efate"?: string; "Pacific/Fakaofo"?: string; "Pacific/Fiji"?: string; "Pacific/Galapagos"?: string; "Pacific/Gambier"?: string; "Pacific/Guadalcanal"?: string; "Pacific/Guam"?: string; "Pacific/Honolulu"?: string; "Pacific/Kanton"?: string; "Pacific/Kiritimati"?: string; "Pacific/Kosrae"?: string; "Pacific/Kwajalein"?: string; "Pacific/Marquesas"?: string; "Pacific/Nauru"?: string; "Pacific/Niue"?: string; "Pacific/Norfolk"?: string; "Pacific/Noumea"?: string; "Pacific/Pago_Pago"?: string; "Pacific/Palau"?: string; "Pacific/Pitcairn"?: string; "Pacific/Port_Moresby"?: string; "Pacific/Rarotonga"?: string; "Pacific/Tahiti"?: string; "Pacific/Tarawa"?: string; "Pacific/Tongatapu"?: string; Africa?: string; America?: string; Antarctica?: string; Arctic?: string; Asia?: string; Atlantic?: string; Australia?: string; Europe?: string; Global?: string; Indian?: string; Pacific?: string; AD?: string; AE?: string; AF?: string; AG?: string; AI?: string; AL?: string; AM?: string; AO?: string; AQ?: string; AR?: string; AS?: string; AT?: string; AU?: string; AW?: string; AX?: string; AZ?: string; BA?: string; BB?: string; BD?: string; BE?: string; BF?: string; BG?: string; BH?: string; BI?: string; BJ?: string; BL?: string; BM?: string; BN?: string; BO?: string; BQ?: string; BR?: string; BS?: string; BT?: string; BV?: string; BW?: string; BY?: string; BZ?: string; CA?: string; CC?: string; CD?: string; CF?: string; CG?: string; CH?: string; CI?: string; CK?: string; CL?: string; CM?: string; CN?: string; CO?: string; CR?: string; CU?: string; CV?: string; CW?: string; CX?: string; CY?: string; CZ?: string; DE?: string; DJ?: string; DK?: string; DM?: string; DO?: string; DZ?: string; EC?: string; EE?: string; EG?: string; EH?: string; ER?: string; ES?: string; ET?: string; FI?: string; FJ?: string; FK?: string; FM?: string; FO?: string; FR?: string; GA?: string; GB?: string; GD?: string; GE?: string; GF?: string; GG?: string; GH?: string; GI?: string; GL?: string; GM?: string; GN?: string; GP?: string; GQ?: string; GR?: string; GS?: string; GT?: string; GU?: string; GW?: string; GY?: string; HK?: string; HM?: string; HN?: string; HR?: string; HT?: string; HU?: string; ID?: string; IE?: string; IL?: string; IM?: string; IN?: string; IO?: string; IQ?: string; IR?: string; IS?: string; IT?: string; JE?: string; JM?: string; JO?: string; JP?: string; KE?: string; KG?: string; KH?: string; KI?: string; KM?: string; KN?: string; KP?: string; KR?: string; KW?: string; KY?: string; KZ?: string; LA?: string; LB?: string; LC?: string; LI?: string; LK?: string; LR?: string; LS?: string; LT?: string; LU?: string; LV?: string; LY?: string; MA?: string; MC?: string; MD?: string; ME?: string; MF?: string; MG?: string; MH?: string; MK?: string; ML?: string; MM?: string; MN?: string; MO?: string; MP?: string; MQ?: string; MR?: string; MS?: string; MT?: string; MU?: string; MV?: string; MW?: string; MX?: string; MY?: string; MZ?: string; NA?: string; NC?: string; NE?: string; NF?: string; NG?: string; NI?: string; NL?: string; NO?: string; NP?: string; NR?: string; NU?: string; NZ?: string; OM?: string; PA?: string; PE?: string; PF?: string; PG?: string; PH?: string; PK?: string; PL?: string; PM?: string; PN?: string; PR?: string; PS?: string; PT?: string; PW?: string; PY?: string; QA?: string; RE?: string; RO?: string; RS?: string; RU?: string; RW?: string; SA?: string; SB?: string; SC?: string; SD?: string; SE?: string; SG?: string; SH?: string; SI?: string; SJ?: string; SK?: string; SL?: string; SM?: string; SN?: string; SO?: string; SR?: string; SS?: string; ST?: string; SV?: string; SX?: string; SY?: string; SZ?: string; TC?: string; TD?: string; TF?: string; TG?: string; TH?: string; TJ?: string; TK?: string; TL?: string; TM?: string; TN?: string; TO?: string; TR?: string; TT?: string; TV?: string; TW?: string; TZ?: string; UA?: string; UG?: string; UM?: string; US?: string; UY?: string; UZ?: string; VA?: string; VC?: string; VE?: string; VG?: string; VI?: string; VN?: string; VU?: string; WF?: string; WS?: string; YE?: string; YT?: string; ZA?: string; ZM?: string; ZW?: string; }
modemodeThis specifies the type of value and the associated options presented to the user: Using "offset" will provide options that show timezone offsets. Using "name" will provide options that show the IANA time zone names."name" | "offset" | "region""offset"
namenameSpecifies the name of the component. Required to pass the component's value on form submission.string
offsetStyleoffset-styleSpecifies how the offset will be displayed, where "user" uses UTC or GMT depending on the user's locale, "gmt" always uses GMT, and "utc" always uses UTC. This only applies to the offset mode."gmt" | "user" | "utc""user"
openopenWhen true, displays and positions the component.booleanfalse
overlayPositioningoverlay-positioningDetermines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed"."absolute" | "fixed""absolute"
readOnlyread-onlyWhen true, the component's value can be read, but controls are not accessible and the value cannot be modified.booleanfalse
referenceDatereference-dateThis date will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format ("YYYY-MM-DD", "YYYY-MM-DDTHH:MM:SS.SSSZ").Date | string
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
statusstatusSpecifies the status of the input field, which determines message and icons."idle" | "invalid" | "valid""idle"
validationIconvalidation-iconSpecifies the validation icon to display under the component.boolean | string
validationMessagevalidation-messageSpecifies the validation message to display under the component.string
validityread-onlyThe current validation state of the component.{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }
valuevalueThe component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC. If no value is provided, the user's time zone offset will be selected by default.string

Events

NameDescriptionBehavior
calciteInputTimeZoneBeforeCloseFires when the component is requested to be closed and before the closing transition begins.bubblescomposed
calciteInputTimeZoneBeforeOpenFires when the component is added to the DOM but not rendered, and before the opening transition begins.bubblescomposed
calciteInputTimeZoneChangeFires when the component's value changes.bubblescomposed
calciteInputTimeZoneCloseFires after the component is closed and animation is complete.bubblescomposed
calciteInputTimeZoneOpenFires after the component is opened and animation is complete.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close