About timezones

For adding a drop-down of timezones of a country from country code, include bootstrap-formhelpers-timezones.codes.js and bootstrap-formhelpers-timezones.js once alongside the other JS files.

Use cases

Example for loading the list of timezones for a country

<select class="input-medium 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>
<select id="timezones1" class="input-medium"></select>

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

<div class="bfh-selectbox bfh-timezones" data-country="US">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

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

<select id="countries_timezones1" class="input-medium bfh-countries" data-country="US"></select>
<select class="input-medium 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">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
    </ul>
  </div>
  </div>
</div>
<div class="bfh-selectbox bfh-timezones" data-country="countries_timezones2">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
    </ul>
  </div>
  </div>
</div>