Timezones Select Box Using ReactJS

Sunday, 8 January 2017 | Posted by
This is simple code which can save some of your time, if you trying to build Select field for timezones. Find below for complete Timezones code

Timezones

Find below for Timezones.js which contains all timezone names and values
export default [
    {"value":"America/Adak","name":"Adak"},
    {"value":"America/Anchorage","name":"Anchorage"},
    {"value":"America/Anguilla","name":"Anguilla"},
    {"value":"America/Antigua","name":"Antigua"},
    .....
  ];

Normal Select Box

This normal select box in which Timezones were mapped as options
<select value={this.state.timezone} onChange={this.onSelect}>
           {Timezones.map((timezone) => <option value={timezone.value}>{timezone.name}</option>)}
</select>

React-bootstrap Select box

This Select box uses bootstrap styles and components
<FormControl value={this.state.timezone} onChange={this.onSelect} componentClass="select" placeholder="select">
    {Timezones.map((timezone) => <option value={timezone.value}>{timezone.name}</option>)}
</FormControl>

React-select Select box

react-select is React version of Select2. 
<Select value={this.state.timezone} onChange={this.onSelect2} placeholder="select" options={Timezones} labelKey="name" valueKey="value">
</Select>

Complete component code

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-select/dist/react-select.min.css';
import React from 'react';
import Timezones from './Timezones';
import {FormControl} from 'react-bootstrap';
import Select from 'react-select';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      timezone:'America/Aruba'
    }
    this.onSelect = this.onSelect.bind(this);
    this.onSelect2 = this.onSelect2.bind(this);
  }

  onSelect(event) {
    this.setState({
      timezone:event.target.value
    });
  }

  onSelect2(language) {
    this.setState({
      timezone:language.value
    });
  }

  render() {
    return (
      <div>
        <h1>Select box for Timezones</h1>
        <select value={this.state.timezone} onChange={this.onSelect}>
           {Timezones.map((timezone) => <option value={timezone.value}>{timezone.name}</option>)}
        </select>
        <br/><br/><br/>
        <h1>Bootstrap Select box for Timezones</h1>
        <FormControl value={this.state.timezone} onChange={this.onSelect} componentClass="select" placeholder="select">
          {Timezones.map((timezone) => <option value={timezone.value}>{timezone.name}</option>)}
        </FormControl>
        <br/><br/><br/>
        <h1>React Select2 for Timezones</h1>
        <Select value={this.state.timezone} onChange={this.onSelect2} placeholder="select"
           options={Timezones} labelKey="name" valueKey="value">
        </Select>
      </div>
    )
  }
}
Labels:

19 comments:

  1. Tony Stark30 July 2018 at 01:56

    PLC Training in Chennai | PLC Training Institute in Chennai | PLC Training Center in Chennai | PLC SCADA Training in Chennai | PLC SCADA DCS Training in Chennai | Best PLC Training in Chennai | Best PLC Training Institute in Chennai | PLC Training Centre in Chennai | Embedded System Training in Chennai | Embedded Training in Chennai | VLSI Training in Chennai | VLSI Training Institute in Chennai

    ReplyDelete
  2. Tony Stark30 July 2018 at 01:56

    PLC Training in Chennai | PLC Training Institute in Chennai | PLC Training Center in Chennai | PLC SCADA Training in Chennai | PLC SCADA DCS Training in Chennai | Best PLC Training in Chennai | Best PLC Training Institute in Chennai | PLC Training Centre in Chennai | PLC SCADA Training in Chennai | Automation Training Institute in Chennai | PLC Training in Kerala | VLSI Training in Chennai | Best VLSI Training in Chennai | VLSI Training Centres in Chennai | VLSI Courses in Chennai | VLSI Training Courses in Chennai | VLSI Training Institute in Chennai | VLSI Training Institutes in Chennai | Best VLSI Training Institute in Chennai

    ReplyDelete
  3. Tony Stark30 July 2018 at 01:56

    Embedded Training in Chennai | Best Embedded Training in Chennai | Embedded System Training in Chennai | Embedded System Training Institute in Chennai | Best Embedded System Training Institute in Chennai | Embedded Course in Chennai | Embedded System Training Institutes in Chennai | Embedded System Training Center in Chennai | Best Embedded System Training in Chennai | Embedded Systems Training in Chennai | VLSI Training in Chennai | VLSI Training Institute in Chennai

    ReplyDelete
  4. FLIP DIVING15 November 2018 at 23:01

    Hi there, You've done an incredible job. I will definitely digg it and in my view suggest to my friends.I am sure they will be benefited from this web site.
    kissmanga

    ReplyDelete
  5. Unknown5 October 2019 at 18:04

    paito warna china
    data sydney update
    datahk
    syair sydney
    syairsgp
    datasgp
    paito warna terlengkap
    http://warungsgp.com/
    live hk 6d
    live sydney

    ReplyDelete
  6. smartdeveloper30 August 2020 at 08:19

    Amazing Article ! I would like to thank you for the efforts you had made for writing this awesome article.
    Thanks for sharing such a nice info.I hope you will share more information like this. please keep on sharing!



    internship in chennai
    internship in chennai for cse
    internship for mba in chennai
    internship in chennai for hr
    internship in chennai for mba
    companies for internship in chennai
    internship in chennai for ece
    paid internship in chennai
    internship in chennai for biotechnology
    internship in chennai for b.com students

    ReplyDelete
  7. invincible019 September 2020 at 02:44

    Amazing Article,Really useful information to all So, I hope you will share more information to be check and share here.


    internship in chennai for electrical engineering students
    one month internship in chennai
    vlsi internship in chennai
    unpaid internship in chennai
    internship for hr in chennai
    internship training chennai
    internship for freshers in chennai
    internship in chennai for it students with stipend
    internship in accenture chennai
    naukri internship in chennai

    ReplyDelete
  8. MeraLegal.Com21 October 2020 at 04:39

    nice blog...looking for more useful information....For Online accounting services please visit here:
    https://meralegal.com/accounting.php

    ReplyDelete
  9. Md. Manzurul Islam28 October 2020 at 21:21

    The very Nice post to read from the interesting article and I really like that one of the interesting content in the post and really helpful for me and for other readers on that website to read that, I am expecting more such kind of posting from the writer So Nice. I know party rentals bethesda md . they provide better service
    https://dcpartyrentalsupply.com/blog-party-rental-bethesda-md/
    party rentals bethesda md

    ReplyDelete
  10. Six sigma certification 4 November 2020 at 02:27

    Amazing information

    Get Six Sigma Certification In Delhi with HenryHarvin.
    Learn from experts and be on top.

    ReplyDelete
  11. Six sigma certification 4 November 2020 at 02:28

    Thank you for this informative post

    Get Six Sigma Certification Online with HenryHarvin.
    Learn from experts and be on top

    ReplyDelete
  12. Six sigma certification 4 November 2020 at 02:29

    Well written article, loved it!
    Get Lean Six Sigma Green Belt Certification with HenryHarvin.
    Learn from experts and be on top

    ReplyDelete
  13. Blognews.12348 November 2020 at 20:05

    พบกับหวยรูปแบบใหม่ที่สามารถแทงได้ทุกที่ ทุกเวลาด้วยตัวท่านเองผ่านมือถือของคุณเอง

    หวยออนไลน์ ของเราคุณจะสามารถแทงได้ตลอดไม่มีการอั้นเลขเหมือนแผงหวยททั่วไป

    ถ้านึกถึงหวยออนไลน์ต้อง Click1234 เปิดประสบการ์ณใหม่ๆกับการแทงหวยของคุณ

    ReplyDelete
  14. Hania khan1 December 2020 at 21:38

    http://ashstyles.com/

    ReplyDelete
  15. Hania OCS7 December 2020 at 00:51

    ERP Gold Software
    How ERP Gold works as an inventory management software for Walmart
    Why do sellers on Walmart need inventory management software?
    Inventory management involves the process of ordering, handling, storing, and processing a company’s inventory. This has done because, without an effective inventory management system, the full potential of the supply chain becomes unattainable.
    For more information about ERP Gold inventory management software, please click on the link below.
    https://www.erp.gold/walmart-erp-integration-software/

    ReplyDelete
  16. Isabella13 December 2020 at 01:38

    Thanks for sharing a really very nice and wonderful article i like your blog too much

    ReplyDelete
  17. ilander vijay9 January 2021 at 01:16

    Thank you for sharing your info. I really appreciate your efforts and I am waiting for your further write ups thank you once again.Electrical design for building construction


    ReplyDelete
  18. love back Solution23 February 2021 at 02:54

    This blog is very interesting to read, this contains more useful information, Keep sharing more blogs

    Vashikaran Specialist in Jalandhar  Vashikaran Specialist in Pune  Vashikaran Specialist in Chandigarh  Vashikaran Specialist in Ludhiana  Vashikaran Specialist in Haryana
    Vashikaran Specialist in Faridabad Gurgaon PanchkulaVashikaran Specialist in Indore Bhopal Gwalior  

    ReplyDelete

Subscribe to: Post Comments (Atom)

Blogroll

Follow this blog by Email

Popular Posts