react-timezone
Timezone Picker for React
Demo
Installation
$ npm install react-timezone
Usage
This a controlled element. value
and onChange
needs to be set. Values are timezone codenames.
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.
Minimal styles are included with the build.
Timezones are included in the bundle and can be accessed by importing timezones
from the package.
A zone object's structure is like this:
{ name: string, label: string, offset: number, }
Timezones
Timezones are stolenborrowed from Google Calendar.
Example
import TimezonePicker from 'react-timezone'; export default () => ( <TimezonePicker value="Asia/Yerevan" onChange={timezone => console.log('New Timezone Selected:', timezone)} inputProps={{ placeholder: 'Select Timezone...', name: 'timezone', }} /> );