About timezone picker

This jQuery plugin allows you to add a timezone picker to easily display a list of timezones in your Bootstrap form. This timezone picker can be used along with our select jQuery plugin as well as our country picker jQuery plugin.

Examples

Example for loading the list of timezones for a country

<select class="form-control bfh-timezones" data-country="US"></select>

Example for loading the list of timezones for a country in JavaScript



<button onclick="$('#timezones1').bfhtimezones({country: 'US'})" class="btn">
  Load Timezones
</button>
<br><br>
<select id="timezones1" class="form-control"></select>

Example for loading the list of timezones using Bootstrap Form Helpers' Select Box

<div class="bfh-selectbox bfh-timezones" data-country="US">
</div>

Example for loading the list of timezones based on a country selector



<select id="countries_timezones1" class="form-control bfh-countries" data-country="US"></select>
<br><br>
<select class="form-control bfh-timezones" data-country="countries_timezones1"></select>

Example for loading the list of timezones based on a country select using Bootstrap Form Helpers Select Box



<div id="countries_timezones2" class="bfh-selectbox bfh-countries" data-country="US">
</div>
<br><br>
<div class="bfh-selectbox bfh-timezones" data-country="countries_timezones2">
</div>

Available languages

  • English (US)
  • Simplified Chinese (CN)

Options

Option Description
country Two letters country code or ID of a bfh-countries HTML element. To filter based on a country. Required. Default: ''
timezone Timezone identifier. To select a timezone. Required if blank is to false. Default: ''
blank Boolean. To show a blank option. Default: true

If using our select jQuery plugin, refer to this documentation for a list of additional options.

Methods

If using our select jQuery plugin, refer to this documentation for a list of methods.

Events

If using our select jQuery plugin, refer to this documentation for a list of events.