Multiple timepickers in the same page

[ZeRego]

I notice a strange behavior when there are multiple timepickers in the same page. After switching between the two timepickers, eventually one of them isn't removed/hidden, and will persist till we refresh the page.

I thought it was a problem with my code but then i did a test with a simple bootstrap example i found on google.

Fiddle bug example: http://jsfiddle.net/kW3G7/282/

The only code that is used is: $('.timepicker').timepicker();

Thanks in advance.

Edit: It seems that the timepicker stops calling the document onclick event(code above)

$(document).on('mousedown.timepicker, touchend.timepicker', function (e) {
    // This condition was inspired by bootstrap-datepicker.
    // The element the timepicker is invoked on is the input but it has a sibling for addon/button.
    if (!(self.$element.parent().find(e.target).length ||
            self.$widget.is(e.target) ||
            self.$widget.find(e.target).length)) {
          self.hideWidget();
        }
    });

[ZeRego]

Solution, for now, remove the "touchend.timepicker" from the "on" event trigger.

[swethanaidu]

Use this css trick...

<span>
    <input class="input-sm time-pick form-control" name="time_start" type="text">
</span>
<span>
     <input class="input-sm time-pick form-control" name="time_end" type="text">
</span>

Check this link http://jsfiddle.net/kW3G7/592/