Plugin month - timepicker

Time picker plugin

Time for another plugin. You might have clocked that I'm liable to make puns about this one. I'm sorry, you'll just have to face up to that fact. I promise none of them will be second-hand. I just hope they don't tick you off. Don't worry, we're half past them now. I don't know you very well, but I think hour relationship can tock it.

Here it is:

This plugin arose out of needing something like this but not being able to find one. There is a already a timepicker plugin for Bootstrap, and it's very good, but it seems to require a lot of Bootstrap JS and CSS in order to work, and that wasn't an option for the site I was building at the time. What I needed was a simple, lightweight plugin with no dependencies, so I wrote one.

The plugin includes options for 12/24 hour display, the initial time shown, how many minutes to change by when changing minutes and even what text should go on the +/- buttons. You can change the time by clicking the buttons, typing directly into the boxes in the popup, or using the up/down keys when the focus is on the same boxes.

It's not been tested in the wild yet, but it seems to work quite well. If you use it and encounter any bugs or would like more features, let me know. Code and details on my github page as usual.

An alternative: the time input element type

If you want an easier and simpler time picker you can use the time input element type, which will do different things in different browsers. In Firefox and most older browsers, it simply renders as a text input. In Chrome the element appears more like an number input, with the time shown and arrows at the side to increase or decrease the selected value. In some mobile devices (tested on an iphone) the time input produces a nice sliding interface of hours and minutes to select from, akin to the interface to a select element. There's one below if you want to see what it does in your browser.


This article is tagged with