Getting the time from a Bootstrap Timepicker
===

I'm trying to get the time from a [Bootstrap Timepicker][1] using the [getTime][2] function, but only get an error message in the console when I press the button (with ID of my-button, see code below.)

**HTML**

    <div class="input-append bootstrap-timepicker-component">
        <input type="text" class="timepicker input-small">
        <span class="add-on">
            <i class="icon-time"></i>
        </span>
    </div>

**JavaScript**

    <script type="text/javascript">
      $('#my-button').on('click', function() {
        alert($('.timepicker').getTime());
      });
    
      $('.timepicker').timepicker({
        template : 'dropdown',
        showInputs: false,
        showSeconds: false
      });
    </script>

**Error in the console**

    Uncaught TypeError: Object [object Object] has no method 'getTime'

I've been trying to figure this out for hours. I thought I could use the source code to learn how to use the picker, and it looks like there's a getTime() function, but I can't for the life of me figure out how to use it. I'm using Rails, for what it's worth. Thanks guys!

  [1]: http://jdewit.github.com/bootstrap-timepicker/
  [2]: https://github.com/jdewit/bootstrap-timepicker/blob/master/js/bootstrap-timepicker.js