This Simple Clock using Dropdown in Bootstrap Template. This simple tutorial creates using JavaScript, HTML, and Bootstrap Template for the GUI. Using the drop down function, you can set the time format in every city around the world. You can use this simple tutorial to change the time set in your web projects or in a system that you have. There's many time format around the world, but in this case, we have some list of cities in different time format to show you how's the result using the drop down in just one click.

To add more cities in different time format, kindly add in the drop down using the option tag and specify the offset of the city from the GMT inside the select option.

Check the LIVE DEMO below.

⚙ Live Demo

Example Time Format

1. <option
   
   value
   
   =
   
   "9"
   
   >
   
   Tokyo</
   
   option
   
   >
   
2. <option
   
   value
   
   =
   
   "10"
   
   >
   
   Sydney</
   
   option
   
   >
   
3. <option
   
   value
   
   =
   
   "12"
   
   >
   
   Fiji</
   
   option
   
   >
   
4. <option
   
   value
   
   =
   
   "-10"
   
   >
   
   Hawaii</
   
   option
   
   >
   

We are going to create simple Markup to insert the list of cities that have a different time format.

1. <table
   
   border
   
   =
   
   "0"
   
   width
   
   =
   
   "200"
   
   cellspacing
   
   =
   
   "0"
   
   cellpadding
   
   =
   
   "3"
   
   >
   
2. <form
   
   >
   
3. <tr
   
   >
   
4. <td
   
   width
   
   =
   
   "100%"
   
   >
   
5. <select
   
   name
   
   =
   
   "city"
   
   size
   
   =
   
   "1"
   
   class
   
   =
   
   "form-control"
   
   onchange
   
   =
   
   "updateclock(this);"
   
   >
   
6. </
   
   select
   
   >
   
7. </
   
   td
   
   >
   
8. </
   
   tr
   
   >
   
9. <tr
   
   >
   
10. <td
    
    width
    
    =
    
    "100%"
    
    >
    
11. <h2
    
    >
    
    Output</
    
    h2
    
    >
    
12. </
    
    td
    
    >
    
13. </
    
    tr
    
    >
    
14. <tr
    
    >
    
15. <td
    
    width
    
    =
    
    "100%"
    
    style
    
    =
    
    "color:blue;"
    
    >
    
16. <script
    
    src
    
    =
    
    "js/function.js"
    
    language
    
    =
    
    "JavaScript"
    
    ></
    
    script
    
    >
    
17. </
    
    td
    
    >
    
18. </
    
    tr
    
    >
    
19. </
    
    form
    
    >
    
20. </
    
    table
    
    >
    

This simple source code below, we have a list of cities to insert in the drop down. To select the users what time format that they want. Kindly copy and paste this source code in the select element.

1. <option
   
   value
   
   =
   
   ""
   
   selected>
   
   Local time</
   
   option
   
   >
   
2. <option
   
   value
   
   =
   
   "0"
   
   >
   
   London GMT</
   
   option
   
   >
   
3. <option
   
   value
   
   =
   
   "1"
   
   >
   
   Rome</
   
   option
   
   >
   
4. <option
   
   value
   
   =
   
   "7"
   
   >
   
   Bangkok</
   
   option
   
   >
   
5. <option
   
   value
   
   =
   
   "8"
   
   >
   
   Hong Kong</
   
   option
   
   >
   
6. <option
   
   value
   
   =
   
   "9"
   
   >
   
   Tokyo</
   
   option
   
   >
   
7. <option
   
   value
   
   =
   
   "10"
   
   >
   
   Sydney</
   
   option
   
   >
   
8. <option
   
   value
   
   =
   
   "12"
   
   >
   
   Fiji</
   
   option
   
   >
   
9. <option
   
   value
   
   =
   
   "-10"
   
   >
   
   Hawaii</
   
   option
   
   >
   
10. <option
    
    value
    
    =
    
    "-8"
    
    >
    
    San Francisco</
    
    option
    
    >
    
11. <option
    
    value
    
    =
    
    "-5"
    
    >
    
    New York</
    
    option
    
    >
    
12. <option
    
    value
    
    =
    
    "-3"
    
    >
    
    Buenos Aires</
    
    option
    
    >
    
13. <option
    
    value
    
    =
    
    "10"
    
    >
    
    Hobart</
    
    option
    
    >
    
14. <option
    
    value
    
    =
    
    "4"
    
    >
    
    Abu Dhabi, Muscat</
    
    option
    
    >
    
15. <option
    
    value
    
    =
    
    "-9"
    
    >
    
    Alaska</
    
    option
    
    >
    
16. <option
    
    value
    
    =
    
    "2"
    
    >
    
    Jerusalem</
    
    option
    
    >
    

The Complete Source Code

Copy and paste to the BODY tag of your web page.

1. <table
   
   border
   
   =
   
   "0"
   
   width
   
   =
   
   "200"
   
   cellspacing
   
   =
   
   "0"
   
   cellpadding
   
   =
   
   "3"
   
   >
   
2. <form
   
   >
   
3. <tr
   
   >
   
4. <td
   
   width
   
   =
   
   "100%"
   
   >
   
5. <select
   
   name
   
   =
   
   "city"
   
   size
   
   =
   
   "1"
   
   class
   
   =
   
   "form-control"
   
   onchange
   
   =
   
   "updateclock(this);"
   
   >
   
6. <option
   
   value
   
   =
   
   ""
   
   selected>
   
   Local time</
   
   option
   
   >
   
7. <option
   
   value
   
   =
   
   "0"
   
   >
   
   London GMT</
   
   option
   
   >
   
8. <option
   
   value
   
   =
   
   "1"
   
   >
   
   Rome</
   
   option
   
   >
   
9. <option
   
   value
   
   =
   
   "7"
   
   >
   
   Bangkok</
   
   option
   
   >
   
10. <option
    
    value
    
    =
    
    "8"
    
    >
    
    Hong Kong</
    
    option
    
    >
    
11. <option
    
    value
    
    =
    
    "9"
    
    >
    
    Tokyo</
    
    option
    
    >
    
12. <option
    
    value
    
    =
    
    "10"
    
    >
    
    Sydney</
    
    option
    
    >
    
13. <option
    
    value
    
    =
    
    "12"
    
    >
    
    Fiji</
    
    option
    
    >
    
14. <option
    
    value
    
    =
    
    "-10"
    
    >
    
    Hawaii</
    
    option
    
    >
    
15. <option
    
    value
    
    =
    
    "-8"
    
    >
    
    San Francisco</
    
    option
    
    >
    
16. <option
    
    value
    
    =
    
    "-5"
    
    >
    
    New York</
    
    option
    
    >
    
17. <option
    
    value
    
    =
    
    "-3"
    
    >
    
    Buenos Aires</
    
    option
    
    >
    
18. <option
    
    value
    
    =
    
    "10"
    
    >
    
    Hobart</
    
    option
    
    >
    
19. <option
    
    value
    
    =
    
    "4"
    
    >
    
    Abu Dhabi, Muscat</
    
    option
    
    >
    
20. <option
    
    value
    
    =
    
    "-9"
    
    >
    
    Alaska</
    
    option
    
    >
    
21. <option
    
    value
    
    =
    
    "2"
    
    >
    
    Jerusalem</
    
    option
    
    >
    
22. </
    
    select
    
    >
    
23. </
    
    td
    
    >
    
24. </
    
    tr
    
    >
    
25. <tr
    
    >
    
26. <td
    
    width
    
    =
    
    "100%"
    
    >
    
27. <h2
    
    >
    
    Output</
    
    h2
    
    >
    
28. </
    
    td
    
    >
    
29. </
    
    tr
    
    >
    
30. <tr
    
    >
    
31. <td
    
    width
    
    =
    
    "100%"
    
    style
    
    =
    
    "color:blue;"
    
    >
    
32. <script
    
    src
    
    =
    
    "js/function.js"
    
    language
    
    =
    
    "JavaScript"
    
    ></
    
    script
    
    >
    
33. </
    
    td
    
    >
    
34. </
    
    tr
    
    >
    
35. </
    
    form
    
    >
    
36. </
    
    table
    
    >
    

One Example of Time Format



⚙ Live Demo

For the full source code, click the downloadable button below.

Try it and just have fun while you are in coding. Thank you. Happy coding.

Download