Today, I went through this nice jQuery time picker UI which allows picking the time after clicking in the input box. 24h and 12h formats are available to select.

jQuery Time Picker UI

Got them down and played with it for a while. Must say it’s really fast, you just have to mouse over and select the time. 24h format didn’t have any prefix “AM/PM” but as usual there are prefix for 12h format. One thing is, when it shows the prefix, it goes out of the input box as a result you can only see half of “a” or “p”. So went through the codes and just added a simple CSS class just for this 12h format so that when someone select 12h formats it shows the prefix fully.

Here are some modifications.

CSS (styles.css)
.width80 {
width:80px !important;
}

Now go to the index.html and in line# 233 add the following line ….

$('#demo-4').addClass('width80');

If you use basic 12h format too, then add another line in 234

$('#demo-2').addClass('width80');


That’s it! Now it looks better I guess.

Full prefix view

You can download the source code from here.