Searchable Timezone Selector Widget in jQuery – timezoneWidget

In this tutorial I am going to share simple lightweight jQuery plugin to add timezone selector feature on your website so that your user can set their own country timezone for their interface. This is a jQuery plugin with corresponding server code (currently PHP only) which draws a timezone selection widget. The plugin has an option (guessUserTimezone, default false) to automatically guess a user’s timezone. The server class in PHP includes a method generating the JSON timezone data, validating submitted timezones, and a helper to get a region for a timezone name (from the DateTimeZone PHP class).
Searchable Timezone Selector Widget in jQuery
It is designed to be very simple and intuitive, an emphasis has been made to make it especially useful to users in the United States. However, it is very easy to find any timezone in the world.


Integrate Timezone Selector

Libraries

Add the following libraries on page using of bootstrap is optional.

<!-- 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">
 
<!-- 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"></script>

HTML

Create two HIDDEN input for the region and timezone selection and Create a container element for the timezone selector.

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



JS

Get the timezone data from server side and specify the timezone data in function as below.

$(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) {
				console.log("onTimezoneSelect");
				console.log("REGION: " + region);
				console.log("TIMEZONE: " + timezone);
			},
			guessUserTimezone: true
		});
	}, 'json');
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.