JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<p class="title">Date Format:</p>
<div class="b_line clearfix">
    <div>
        <input id="date_format_md" name="date_format" class="date-format-radio" data-format="date" type="radio" value="md" checked="checked" />
        <label for="date_format_md">October 8, 2013 (10/8/2013)</label>
    </div>
    <div>
        <input id="date_format_dm" name="date_format" class="date-format-radio" data-format="date" type="radio" value="dm" />
        <label for="date_format_dm">8 October 2013 (8/10/2013)</label>
    </div>
</div>
<p class="title">Time Format:</p>
<div class="b_line clearfix">
    <div>
        <input id="time_format_12" name="time_format" class="time-format-radio" data-format="time" type="radio" value="12" checked="checked" />
        <label for="time_format_12">12-Hour (<span>1:15 PM</span>)</label>
    </div>
    <div>
        <input id="time_format_24" name="time_format" class="time-format-radio" data-format="time" type="radio" value="24" />
        <label for="time_format_24">24-Hour (<span>13:15</span>)</label>
    </div>
</div>
<div class="b_line clearfix">
    <label for="choose_timezone" class="title">Time Zone:</label>
    <select id="choose_timezone" class="txt_field_timezone txt_field_sml"></select>
</div>
<div class="info"><b>Your Current Local Date and Time:</b> (based on your settings above)</div>
<div id="current_local_time">Tuesday, October 8, 2013 1:15 PM</div>

JavaScript

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var timezones = [//list from http://www.freeformatter.com/time-zone-list-html-select.html
	["-12:00", 0, "-12", "International Date Line West"],
	["-11:00", 0, "-11", "Midway Island, Samoa"],
	["-10:00", 0, "-10", "Hawaii"],
	["-09:00", 1, "-9",  "Alaska"],
	["-08:00", 1, "-8",  "Pacific Time (US & Canada"],
	["-08:00", 1, "-8",  "Tijuana, Baja California"],
	["-07:00", 0, "-7",  "Arizona"],
	["-07:00", 1, "-7",  "Chihuahua, La Paz, Mazatlan"],
	["-07:00", 1, "-7",  "Mountain Time (US & Canada"],
	["-06:00", 0, "-6",  "Central America"],
	["-06:00", 1, "-6",  "Central Time (US & Canada)"],
	["-06:00", 1, "-6",  "Guadalajara, Mexico City, Monterrey"],
	["-06:00", 0, "-6",  "Saskatchewan"],
	["-05:00", 0, "-5",  "Bogota, Lima, Quito, Rio Branco"],
	["-05:00", 1, "-5",  "Eastern Time (US & Canada)"],
	["-05:00", 1, "-5",  "Indiana (East)"],
	["-04:00", 1, "-4",  "Atlantic Time (Canada)"],
	["-04:00", 0, "-4",  "Caracas, La Paz"],
	["-04:00", 0, "-4",  "Manaus"],
	["-04:00", 1, "-4",  "Santiago"],
	["-03:30", 1, "-3.5","Newfoundland"],
	["-03:00", 1, "-3",  "Brasilia"],
	["-03:00", 0, "-3",  "Buenos Aires, Georgetown"],
	["-03:00", 1, "-3",  "Greenland"],
	["-03:00", 1, "-3",  "Montevideo"],
	["-02:00", 1, "-2",  "Mid-Atlantic"],
	["-01:00", 0, "-1",  "Cape Verde Is."],
	["-01:00", 1, "-1",  "Azores"],
	["+00:00", 0, "0",   "Casablanca, Monrovia, Reykjavik"],
	["+00:00", 1, "0",   "Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London"],
	["+01:00", 1, "1",   "Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna"],
	["+01:00", 1, "1",   "Belgrade, Bratislava, Budapest, Ljubljana, Prague"],
	["+01:00", 1, "1",   "Brussels, Copenhagen, Madrid, Paris"],
	["+01:00", 1, "1",   "Sarajevo, Skopje, Warsaw, Zagreb"],
	["+01:00", 1, "1",   "West Central...