Time Zone Picker

import * as React from "react";
import { TimezonePicker } from "spaceweb/time-zone-picker";

export default () => {
  const [value, setValue] = React.useState(
    "Asia/Kolkata"
  );
  return (
    <TimezonePicker
      value={value}
      onChange={option => setValue(option?.id)}
      intent="default"
    />
  );
}

import * as React from "react";
import { TimezonePicker } from "spaceweb/time-zone-picker";

export default () => {
  const [value, setValue] = React.useState(
    "Asia/Kolkata"
  );
  return (
    <TimezonePicker
      value={value}
      onChange={option => setValue(option?.id)}
      intent="default"
    />
  );
}

Examples

Timezone picker

daylight savings time

Select...

standard time

Select...

ApiTable

Timezone Picker props

Name	Type	Default	Description
date	date		If not provided, defaults to new Date(). Important to note that the timezone picker only displays options related to the provided date. Take Pacific Time for example. On March 9th, Pacific Time equates to the more specific Pacific Standard Time. On March 10th, it operates on Pacific Daylight Time. The timezone picker will never display PST and PDT together. If you need exact specificity, provide a date. Otherwise it will default to the relevant timezone at render.
disabled	boolean	false	Renders component in disabled state
intent	'default'\| 'success'\| 'warning'\| 'error'		Defines the kind (purpose) of a timezone picker.
mapLabels	function		Customize the option's label. Useful for translations and optionally mapping from 'America/Los_Angeles' to 'Pacific Time'.
onChange	function		Event handler that is called when a new timezone is selected.
overrides	custom		Lets you customize all aspects of the component.
size	'sm'\| 'md'\| 'lg'	md	Defines the size (scale) of dropdown menu items. See the Menu component API.
timezoneOptions	array		Options to be displayed in the dropdown. If not provided, it will defaults to show all the timezones
value	string		Currently selected timezone

You can check the implementation of the component for more details.

Timezone Picker exports

You can import this module like so:

import {TimezonePicker} from 'spaceweb/time-zone-picker'

It exports the following components or utility functions:

TimezonePicker
buildTimeZones

🏁
Getting started

📖
Guides

📦
Packages

🖇
Components