Skip to content

wissemfelissi/react-timezone

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-timezone

Timezone Picker for React

Demo

Available here.

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',
    }}
  />
);

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%