jdewit / bootstrap-timepicker

[Deprecated] A simple timepicker component for Twitter Bootstrap

Timepicker for Twitter Bootstrap

WARNING: This project is no longer maintained.

A simple timepicker component for Twitter Bootstrap.

Status

Please take a look at the CHANGELOG.md and the issues tab for issues we're working on and their relative priorities.

Installation

This project is registered as a Bower package, and can be installed with the following command:

bower install bootstrap-timepicker

You can also download our latest release (and any previous release) here.

Demos & Documentation

View demos & documentation.

Support

If you make money using this timepicker, please consider supporting its development.

Contributing

1. Install NodeJS and Node Package Manager.

2. Install packages

npm install

3. Use Bower to get the dev dependencies.

bower install

4. Use Grunt to run tests, compress assets, etc.

grunt test // run jshint and jasmine tests
grunt watch // run jsHint and Jasmine tests whenever a file is changed
grunt compile // minify the js and css files

• Please make it easy on me by covering any new features or issues with Jasmine tests.
• If your changes need documentation, please take the time to update the docs.

Acknowledgements

Thanks to everyone who have given feedback and submitted pull requests. A list of all the contributors can be found here.

Special thanks to @eternicode and his Twitter Datepicker for inspiration.

bootstrap-timepicker's Issues

timepicker-to-timepicker UI cleanup

I'm attempting to use the timepicker in "dropdown" style but when I tab or click out of a timepicker field and onto ANOTHER timepicker control the original control is left visible on the screen. Here are the steps I've taken (just to ensure you have context and I haven't done anything silly):

1. I have made sure the .less file has compiled to .css successfully and the .css file is referenced by the HTML
2. I have the following HTML in my form:
   <input class="span2 dropdown-timepicker" id="start-time" type="text" name="start-time" data-provide="timepicker">
3. I have included the JS call to timepicker. I load content via a series of AJAX templates and each "template" that is connected to timepicker with this call:
   $( targetString ).find('.timepicker').timepicker();
4. When presented with the form initially it looks fine; when clicking on a timepicker field it too behaves correctly but ...
5. When leaving the field the UI control remains on the screen if -- and only if -- the next control is ALSO a timepicker
6. When I eventually do click on a form element that is NOT a timepicker than all timepicker controls are removed.

I have created a screenshot here: http://www.flickr.com/photos/14261777@N00/7201834692/

Option for 24 hour time instead of meridian

It would be nice to have an option for a 24 hour clock (00:00 - 23:59) instead of meridian (01:00 - 12:59 AM/PM)

$element.get(0).setSelectionRange not supported in ie (testing in ie7)

I'm getting a "Microsoft JScript runtime error: Object doesn't support this property or method" for this section of the code:

 setTimeout(function() {
        $element.get(0).setSelectionRange(0,2);
      }, 0);
    },

I'm still researching a possible fix, but any pointers would be great.

Thanks

Bugs and suggestions

Thanks for your codes. Really appreciate your works.

Here's the bug: when I try to use timePicker with the following codes, The value will turn 00:00 when I finished.

$('#showFrequencyTime').timepicker
                minuteStep: 5
                showInputs: false
                showMeridian: false
                disableFocus: true

when showInputs is true. It'll works fine.

And I have two suggestions:

This plugins is too depending on Bootstrap. Is making it difficult to do custom styling. The DOM structure is pretty complicated, too. It can be simpler but a huge table. I think ChosenJS is doing great. It's just a jQuery plugin without Bootstrap. So I don't have to use those Bootstrap stylesheets which I don't need. Because of the complicated stylesheets. I'm having trouble from dealing with some layer problems.

If you think this is a bad idea. It's not a big deal. But I'm hoping you can change the way to implement the plugin:

I spend a day to figure out why my code doesn't work. And Finally, the problem is that I haven't create a parent div with 'timepicker' class name for the input.
When we use bootstrap components, For example, tooltip. It's should be one line of code instead of two. It's okay, but It can be better.

Thats all. I'd like to help if you'd like to redesign a new style for this components.

Object [object Object] has no method 'timepicker'

my code:

<div class="input-append bootstrap-timepicker-component">
    <input type="text" class="timepicker-default input-small">
    <span class="add-on">
        <i class="icon-time"></i>
    </span>
</div>
        <script type="text/javascript">
        $(document).ready(function() {
            $('.timepicker-default').timepicker();
      });
      </script>

i tried with and without the surrounding document ready callback.
using the latest bootstrap-timepicker.js from git, jquery 1.7.2, bootstrap.js 2.0.4 , jQuery UI 1.8.15 (though disabling jquery-ui doesn't fix it)

24h option

Thanks for this plugin, I could be even better that you add 24h option.

Cheers.

Unfocus the empty textbox automatically adds "12:00 AM" time

Any way (option) to remove this behaviour?

I have to write my own logic to clear it.

"hidden" event propagation can cause troubles with other components

(First of all: @jdewit, it's the first time I write to you, so let me say that this datepicker plugin is excellent and super-useful!)

Datepicker triggers the "hidden" event under certain circumstances. The problem is that other elements, up in the DOM tree could be listening for that event also and, because datepicker doesn't stop the propagation of the event after handling it, those elements receive the event and could act in unexpected ways.

In my particular case, there was a listener ready to .remove() a popup after the "hidden" event is triggered on the popup. When a datepicker inside that popup is closed, the corresponding "hidden" event gets fired, "climbs" up the DOM tree, gets to my popup and the popup is unwillingly removed.

However, probably this is the way datepicker is supposed to work... I'm not sure. It could be the user's responsibility to check if the event triggered is really the one it's been expecting (like I did: checked if event.target == event.currentTarget before removing the popup... that condition is not met when datepicker closes), or it could be the plugin's responsibility to stop the propagation if the event is ment for it.

Hope this is helpful :-)

why I didn't see documentation / demo page in the git repository of bootstrap-timepicker ?

Hi,

why I didn't see documentation / demo page (http://jdewit.github.com/bootstrap-timepicker/) in the git repository of bootstrap-timepicker ?

It's a forget ?

Best regards,
Stephane

Date/time picker

Could this widget be embedded inside of the date picker widget?

Dropdown not working

I can't get the dropdown functionality to work. I am using bootstrap 2.0.3. I also tried in bootstrap 2.0.4. No luck. I tried with everything just like the documentation (copy, pasted source into file and changed bootstrap paths) but only the modal works.

Any ideas?

minified css and dev css are not in line with each other

Any widget related css declarations are absent in dev css and present only in minified version. For example declaration for '.bootstrap-timepicker-widget.dropdown-menu.open'

27:30 is accepted

Two issues:

1. Invalid values for hours > 24 are currently accepted
2. The max value for minutes is 60 - thats wrong too, the max value should be 59.

For example currently 27:60 will be accepted as valid time.

error when time = 00:00 AM is enttered

Hi

User enters the time as 00:00 AM
Widget auto corrects this to 01:00 AM which is wrong. This should be 12:00 AM, isnt it?

Modal not center on small screens

When using timepicker on a smaller screen the modal is not centered and half off the screen.

I've attached a image from the demo page:

Can not type if template is not presented within Chrome

I've tested this on both Linux and Mac Chrome. It works fine if the template is enabled, but does will not allow typing into the input when {template: false} is passed in.

Same behavior is reflected on the demo/documentation site.

Setting the time value when loading the time picker

When loading the timepicker the current time is displayed in the dropdown and the textbox ..But i want to change it to the specific time manually from script..How can i do this.

Manual input in IE9 doesn't work

Maybe related to #31 : If you go to the demo page at http://jdewit.github.com/bootstrap-timepicker/ using IE9 and click the first input and press a key like '1' nothing happens. Using the debugger I saw that elementKeypress' e.keyCode equals 49 but it's expecting 0 (under Firefox it indeed is 0 if '1' is pressed).

Additionally under IE9: pressing the up or down arrow key doesn't do anything because elementKeypress isn't being called.

Also the demo page hangs (100% CPU) under IE9 if you click on the second input because it keeps switching focus between the first and second input.

Bug: Blank Input + defaultTime: 'value' = 00:00:00

If I apply .timepicker() to an empty text input and I'm using 'defaultTime' : 'value' the time comes up as 00:00:00. It should be left blank. In the case that you are pulling the time from a database and the database value is NULL or "", you would want the input to remain blank, not be automatically filled in with 00:00:00....

Didn't work with jQuery UI 1.9.1 or 1.8.24

Hi,
I try to used with this plugin with twitter bootstrap v2.2.1 and jQuery UI 1.9.1 or 1.8.24. Please be kind enough to resolve this issue

Thank you!!

Timepicker not repositioning near edge of screen

The thing keeping me and my team from using this neat component is the fact that the timepicker doesn't reposition itself when the input is near the edger of the screen. This causes horizontal scrolling to appear, interferes with design elements and downgrades the UX grately. This is something that doesn't occur in jQuery UI's Datepicker. See the screenshots bellow for better understanding of the issue:

timpicker within a bootstrap modal window

I recently updated to bootstrap 2.2.2 and using a form within a modal. Timepicker is no longer showing up, but datepicker does work. Not sure if this is just a z-index issue.

Tabbing through input does not work

I'm not sure if this has been brought up, but when tabbing through several inputs, then reaching an input marked up with class="timepicker-default", the curser becomes stuck and the only way to recover from this is to refresh the page. Even after picking a time, the cursor is still stuck.

Scenario: jsfiddle

Adding text inputs to fill hours, minutes and seconds

Hi,

First of all, thank you very much for this great piece of JS library. It saved lots of my time!

I would like to know if it would be possible to have an option to display hours, minutes and seconds in input fields or edit in-place placeholders instead of plain text so that we can manually change them without scrolling with the top and bottom chevrons.

Do you think it would be a nice enhancement?

Unable to close dropdown when click on other input fields

1. Instance the timepicker on input field A
2. Click on A to show dropdown
3. click on another input field B

timepicker dropdown will no hide.

Please help.

When using value as the defaultTime any value past 12AM does not display correctly

Time values are stored in 24hr format. If the value is 14:00:00 it defaults to 12AM.

Non minified css is out of date

I'm using the non-minified version of the css file in my development environment and the dropdown is not working, if I use the minified version it works.

Input fields not directly editable if inside modal window

I'm using a form already in a modal window, the buttons work to set time, but input fields are not editable. I've also noticed that happens on demo page after first load.

Bug with width in Google Chrome

Large size of section changing time in Google Chrome.
Ex.:

include a compiled css file.

Is there anyway someone can compile a css file for me. I am not good with command line.

overrides current time

I already have a value inside a text box, when I make this text box a time-selector element, the default/ current time overrides the text already there. Should we do a check first? If the element is empty then set to the time set in the settings.

$('.time-selector').timepicker({
    showMeridian: false,
    minuteStep: 1,
    defaultTime: "current"
});

<div class="control-group">
<label class="control-label" for="AppointmentTime">
    Appointment time</label>
<div class="controls">
    <div class="input-prepend">
        <input class="input-small time-selector" id="AppointmentTime" name="AppointmentTime" readonly="readonly" type="text" value="15:00"><span class="add-on"><i class="icon-time"></i></span>
    </div>
</div>

Please add a license.

What is the license for this? Can I use it in a product I want to make money off of without having to pay the authors a royalty?

Un-existent update.timepicker event

From documentation, we can subscribe to this event:

$('#timepicker').timepicker().on('update.timepicker', function(e) {
    console.log('The time is ' + e.time);
});

But the only events triggered in source code are 'show.timepicker' and 'hide.timepicker'.

Great work 👍

Bug in AM / PM transition at midnight/noon

If you set the time to be 11:45PM and then click UP on the minutes it goes to 12:00PM but should really go to 12AM.

The equivalent issue occurs at 11:45AM.

I think it revolves around the code which is incrementing hour 12->1 and AM->PM at the same time but you should toggleMeridian() when this.hour === 11 (equivalent for decrementHour) so the two need to be separate if statements:

        , incrementHour: function() {
            if ( this.showMeridian ) {
                if ( this.hour === 12 ) {
                    this.hour = 1;
                    return this.toggleMeridian();
                }

        , decrementHour: function() {
            if ( this.showMeridian ) {
                if (this.hour === 1) {
                    this.hour = 12;
                    return this.toggleMeridian();
                } 

Maybe something like the following for incrementHour (off the top of my head):

        , incrementHour: function() {
            if ( this.showMeridian ) {
                if ( this.hour === 12 ) {
                    return this.hour = 1;
                }
                if ( this.hour === 11 ) {
                    return this.toggleMeridian();
                }

Can't enter time by typing in textbox

On the demo, I tried entering the time in the textbox inside the overlay but it won't let me go past 1 digit. Plus, once entered, how do you apply the change? Hitting enter doesn't do it.

How do I change the options?

Hi,

How can I stop the default time to be now?

Timepicker doesn't disappear when you get out of input using 'tab'.

When you navigate trough timepicker input using tab key, the picker shows correctly but when you go to the next field it doesn't disappear.

incrementHour changing hour from 12 -> 1

Appreciate all the effort on timepicker - very useful. Just noticed that with 12-hour time, when hour is incremented, it does not update the hour going from 12 to 1 (with another click or up-arrow hour goes to 2). I called this.update() when hour advanced from 12 to 1 and it seems to work for now:

else if (this.hour === 12) {
this.hour = 1;
this.update();
return this.hour;
}

Thanks again.

inputs don't come up if retrieved via ajax

I am retrieving a php page using AJAX which has multiple input elements on it including time date and user entry fields.

The time picker field will initiate the correct time but no input fields will open up when focusing on the input.

Timepicker is initialised when the page is returned via AJAX.

can give an example if you need more to go off...

Feature request: Empty field are empty, not 01:00

If a timepicker field has no value, with defaultTime: 'value', it shows a default hour (01:00). It would be great if the field stay empty. However, when the timepicker is shown, the hour in the picker would be the current time (or some value set by a data attribute).

This request is very similar to the 'setStartDate' method that bootstrap-datepicker uses.

Closing picker when instantiated on an element on a modal dialogue closes the dialogue as well

The hidden trigger in the hide method will also close a modal dialogue if the element the picker is attached to in on it. The offending line is:

this.$element.trigger('hidden');

I imagine its due to event propagation and adding a default handler if one is not added to the element instantiating the picker with the function being to simply stop propagation would solve the problem. I will test further scenarios.

Picker displays NaN if input field has something other than a time

Not sure if this is a bug, but it would perhaps be more usable if something else was displayed other than "NaN". This could be a default time (current maybe) or a validation error. Or perhaps prevent characters other than those that match a regex (e.g. /\d{1,2}:\d{1,2}\s[AP]M/).

bootstrap-timepicker.css doesn't contain ".bootstrap-timepicker-widget.dropdown-menu.open"

Couldn't get the dropdown menu open. Figured out that bootstrap-timepicker.css doesn't have the definition of .bootstrap-timepicker-widget.dropdown-menu.open.

But the bootstrap-timepicker.min.css does have it. Please fix.

Append a method to return the time selected in second

Append a method to return the time selected in second :

return (this.hour * (60 * 60)) + (this.minute * 60) + this.second

Timezone

Feature request for timezones being added as an option. Thanks.

How do I open the timepicker from another element?

How do I reference the timepicker (and the hideWidget method) from another script? I basically have a button that I want to use to open the timepicker. I assume it would be something similar to the link in the code that says:

this.$element.parent('.input-append').find('.add-on').on('click', $.proxy(this.showWidget, this));

However, how do I reference the TimePicker itself since it isn't "this" in another script?

Passing option via data-fields

It's not documented, but looking at your code I found that we can pass the options to the timepicker via data-fiels.

For example I'm setting the time using a 'data-default-time'.

Can you update the documentation? I could not issue a pull request as the documentation is on your own site instead of github :)

Tabbing to a non-timepicker field does not close the last timepicker

Which is annoying because you can't see what you're typing unless you click out to close the timepicker.

Although now tabbing down from a timepicker to another closes the first timepicker alright.

Bug in updateFromWidgetInputs()

Hi All,

I think I found a bug in updateFromWidgetInputs() method:

updateFromWidgetInputs: function () {
            var time = $('input.bootstrap-timepicker-hour').val() + ':' + 
                       $('input.bootstrap-timepicker-minute').val() +
                       (this.showSeconds ? 
                           ':' + $('input.bootstrap-timepicker-second').val() 
                        : '') +
                       (this.showMeridian ? 
                           ' ' + $('input.bootstrap-timepicker-meridian').val() 
                        : '');

            this.setValues(time);
}

While the jQuery selector in the above method will work, I believe it should be prefixed or context bounded with this.$widget object if there's more than one timepicker in one page.

So the selector should be:

this.$widget.find('input.bootstrap-timepicker-...')

or

$('input.bootstrap-timepicker-...', this.$widget)

CMIIW

Dropdown mode doesn't work in a modal.

If you have a form in a modal, the time picker does not work inside the modal when in dropdown mode.