What a journey timepicker has been. I want to mention before I get too carried away that I am sorry for any broken code that is about to take place with version 1.1. However, I wouldn’t have done this if it weren’t for the best moving forward.

What Broke?

The changes made timepicker more flexible and compatible with nearly every other language’s time formatting. The changes made were to the following options:

  • timeFormat, altTimeFormat – Starting with this version “h” represents the 12 hour clock and “H” represents the 24 hour clock.
  • ampm – This option has been completely removed from timepicker and localizations. This was already achieved through the “t” token in timeFormat, so it was nearly useless with the added “H” tokens.

This entire change came about with the need for altTimeFormat and pickerTimeFormat (more about this in a moment). Since these two options were recently added we also needed it’s ampm counterpart for each, which began to get very confusing and overwhelming to configure, especially when it could be achieved with the format alone. So the decision was made to drop this option to simplify the process. The only remaining places where ampm option was used was to determine how to format the slider grid labels, and for that we check to see that pickerTimeFormat contains both “h” and “t”.

Ok, Now Show me an Example!

As I mentioned the change wouldn’t have taken place if it weren’t for the better. Well, the configuration went from 2 options to just 1.

// example creating a timepicker
$('#example').timepicker({
	timeFormat: "hh:mm tt"
});

// example formatting a time
$.datepicker.formatTime('hh:mm t', { hour: 14, minute: 36 }, {});

Hang On, You Mentioned Some New Options!

Oh yeah, almost forgot, we have some fun new options!

  • pickerTimeFormat – This is how the time is formatted inside the timepicker. It defaults to timeFormat.
  • pickerTimeSuffix – The string which follows the formatted time inside of the timepicker.
  • parse – This specifies how timepicker should parse the time string. Two options come by default: “strict” requires the time string to match timeFormat exactly, and “loose” uses javascript’s Date(timeString) to try and figure out the time. The “loose” method works fine on simple times, but is not as reliable on more complex times such as times with timezones. So this also brings up a third options which is to pass it your own function to parse the time.
$('#example').timepicker({
	parse: function(timeFormat, timeString, options){
			// do your logic and return like:
			return {
				hour: 19,
				minutes: 10,
				seconds: 23,
				millisec: 45,
				timezone: '-0400'
			};
		}
});

This may be useful for when you have an ultra crazy timeFormat that only you know how to parse. Beware, this can get tricky!

In Closing..

I hope this version of timepicker serves you well with it’s new direction. I think the new features have added much more flexibility with little to no downside. As always, visit the documentation, or if you find a bug head over to Github. If you can generate a solution send over a pull request. Enjoy!