timezoneWidget/demo.html at master · peterjtracey/timezoneWidget · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery timzoneWidget Plugin Demo</title>

    <!-- Bootstrap 3.3.7 -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<link rel="stylesheet" href="jquery.timezonewidget.css">

    <!-- Chosen -->
    <link rel="stylesheet" href="chosen/chosen.css">

</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
			<div class="col-sm-3"></div>
			<div class="col-sm-6">
	<h1>JQuery timezoneWidget</h1>
	<h3>Plugin Minimal Demo</h3>
	<hr/>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12">
				<hr/>
	<a href="demo-widget.html">Full Widget Demo</a>
				|
				<a href="https://github.com/peterjtracey/timezoneWidget">GitHub Project - jQuery timezoneWidget</a>


				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12 pull-right">
			</div>
		</div>
		<div class="row">
			<div class="hidden-sm col-md-2"></div>
			<div class="form-group col-sm-12 col-md-8">
				<label for="user_timezone">Timezone:</label>
				<input type="hidden" name="user_timezone_region" id="user_timezone_region"/>
		    <input type="hidden" name="user_timezone" id="user_timezone"/>
		    <br/><br/>
				<!-- this holds the timezone widget -->
		    <div id="user_edit_timezone"></div>
			</div>
			<div class="hidden-sm col-md-2"></div>
		</div>
	</div>
</body>

<!-- jQuery 3.1.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- chosen -->
<script src="chosen/chosen.jquery.min.js" type="text/javascript"></script>

<script src="jquery.timezonewidget.js?v=1242325"></script>

<script>
$(function () {
	$.get('https://www.unlocktc.com/timezoneWidget/server/php/timezonedata.php', function (tzData) {
		console.log("INIT TZ");
		$("#user_edit_timezone").timezoneWidget({
			data: tzData,
			onRegionSelect: function (region) {
				console.log("onRegionSelect");
				console.log("REGION: " + region);
			},
			onTimezoneSelect: function (region, timezone, auto) {
				console.log("onTimezoneSelect");
				console.log("REGION: " + region);
				console.log("TIMEZONE: " + timezone);
				console.log("GUESSED: " + auto);
			},
			guessUserTimezone: true
		});
	}, 'json');
});
</script>
</html>