About Time Picker

For adding a time picker, include bootstrap-formhelpers-timepicker.js once alongside the other JS files.

Use cases

Simplest example.

<div class="bfh-timepicker">
  <div class="input-prepend bfh-timepicker-toggle" data-toggle="bfh-timepicker">
    <span class="add-on"><i class="icon-time"></i></span>
    <input type="text" class="input-medium" readonly>
  </div>
  <div class="bfh-timepicker-popover">
    <table class="table">
      <tbody>
        <tr>
          <td class="hour">
            <a class="next" href="#"><i class="icon-chevron-up"></i></a><br>
            <input type="text" class="input-mini" readonly><br>
            <a class="previous" href="#"><i class="icon-chevron-down"></i></a>
          </td>
          <td class="separator">:</td>
          <td class="minute">
            <a class="next" href="#"><i class="icon-chevron-up"></i></a><br>
            <input type="text" class="input-mini" readonly><br>
            <a class="previous" href="#"><i class="icon-chevron-down"></i></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Example showing how to set a default time.

<div class="bfh-timepicker" data-time="08:00">
  <div class="input-prepend bfh-timepicker-toggle" data-toggle="bfh-timepicker">
    <span class="add-on"><i class="icon-time"></i></span>
    <input type="text" class="input-medium" readonly>
  </div>
  <div class="bfh-timepicker-popover">
    <table class="table">
      <tbody>
        <tr>
          <td class="hour">
            <a class="next" href="#"><i class="icon-chevron-up"></i></a><br>
            <input type="text" class="input-mini" readonly><br>
            <a class="previous" href="#"><i class="icon-chevron-down"></i></a>
          </td>
          <td class="separator">:</td>
          <td class="minute">
            <a class="next" href="#"><i class="icon-chevron-up"></i></a><br>
            <input type="text" class="input-mini" readonly><br>
            <a class="previous" href="#"><i class="icon-chevron-down"></i></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>