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).
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.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <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"> <link rel="stylesheet" href="chosen/chosen.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">script> <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.
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.
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.
