react-timezone

Timezone Picker for React

Demo

Available here.

Installation

Should prefer installing via NPM:

$ npm install react-timezone

The UMD builds can be found in build directory if you ever need them.

Usage

Works just like every native form element with defaultValue, value and onChange props. The only difference here is that the onChange prop function will get passed the actual selected timezone instead of the browser Event object.

Additionally you can style the container element with className and style props.

Passing an object as inputProps prop will pass it to the underlying input. It can be used for setting name, placeholder on input or listening to input events.

To get the current value, you can use value() method.

Minimal styles are included with the build.

For advanced usage you might need to pass your own timezones. They can be passed via timezones props. The format can be found in src/timezones.json.

You can use disabled prop to disable the input.

Timezones

Timezones are stolenborrowed from Google Calendar.

For now the component expects the value to be in the format of object values in src/timezones.json file and that is the retured value from component.

Example

import TimezonePicker from 'react-timezone';

export default () => (
  <TimezonePicker 
    defaultValue="Asia/Yerevan"
    onChange={timezone => console.log('New Timezone Selected:', timezone)}
    inputProps={{
      placeholder: 'Select Timezone...',
      name: 'timezone',
    }}
  />
);

Contributing

This is pretty much just an alpha version. PRs and issues are welcome.