Adding the ability to use either a 12 or 24 hour clock in the time picker.

Source/Picker.Date.js

@@ -28,6 +28,7 @@ this.DatePicker = Picker.Date = new Class({
 		timePicker: false,
 		timePickerOnly: false, // deprecated, use onlyView = 'time'
 		timeWheelStep: 1, // 10,15,20,30
+		use24HourPicker: !((new Date('1999-12-31 23:59:59')).toLocaleTimeString().test(/pm$/i)), // Does the current locale use 24 hour time?
 
 		yearPicker: true,
 		yearsPerPage: 20,
@@ -533,14 +534,18 @@ var renderers = {
 	time: function(options, date, fn){
 		var container = new Element('div.time'),
 			// make sure that the minutes are timeWheelStep * k
-			initMinutes = (date.get('minutes') / options.timeWheelStep).round() * options.timeWheelStep
+			initMinutes = (date.get('minutes') / options.timeWheelStep).round() * options.timeWheelStep;
+
+		if ( ! options.use24hourPicker ) {
+			container.addClass('hasAMPM');
+		}
 
 		if (initMinutes >= 60) initMinutes = 0;
 		date.set('minutes', initMinutes);
 
 		var hoursInput = new Element('input.hour[type=text]', {
 			title: Locale.get('DatePicker.use_mouse_wheel'),
-			value: date.format('%H'),
+			value: date.format(options.use24HourPicker ? '%H' : '%I'),
 			events: {
 				click: function(event){
 					event.target.focus();
@@ -550,10 +555,9 @@ var renderers = {
 					event.stop();
 					hoursInput.focus();
 					var value = hoursInput.get('value').toInt();
-					value = (event.wheel > 0) ? ((value < 23) ? value + 1 : 0)
-						: ((value > 0) ? value - 1 : 23)
+					value = (event.wheel > 0) ? ((value < 23) ? value + 1 : 0) : ((value > 0) ? value - 1 : 23);
 					date.set('hours', value);
-					hoursInput.set('value', date.format('%H'));
+					hoursInput.set('value', date.format(options.use24HourPicker ? '%H' : '%I'));
 				}.bind(this)
 			},
 			maxlength: 2
@@ -583,14 +587,55 @@ var renderers = {
 			maxlength: 2
 		}).inject(container);
 
+		if ( ! options.use24HourPicker ) {
+
+			var activateSelectedButton = function(e) {
+				e.preventDefault();
+				ampmWrapper.getElement('.active').removeClass('active');
+				this.addClass('active');
+			};
+
+			var ampmWrapper = new Element('div.ampmWrapper').inject(container);
+			var amButton = new Element('a.am', {
+				href : '#',
+				text : 'am',
+				events : {
+					click : activateSelectedButton
+				}
+			}).inject(ampmWrapper);
+			var pmButton = new Element('a.pm', {
+				href : '#',
+				text : 'pm',
+				events : {
+					click : activateSelectedButton
+				}
+			}).inject(ampmWrapper);
+
+			if ( date.get('hours') > 12 ) {
+				pmButton.addClass('active');
+			} else {
+				amButton.addClass('active');
+			}
+		}
+
 
 		new Element('input.ok', {
 			'type': 'submit',
 			value: Locale.get('DatePicker.time_confirm_button'),
 			events: {click: function(event){
+				var selectedHours = hoursInput.get('value').toInt(),
+				    isPM;
 				event.stop();
+				if ( ! options.use24HourPicker ) {
+					isPM = pmButton.hasClass('active');
+					if ( selectedHours === 12 ) {
+						selectedHours = (isPM) ? selectedHours : 0;
+					} else {
+						selectedHours = (isPM) ? selectedHours + 12 : selectedHours;
+					}
+				}
 				date.set({
-					hours: hoursInput.get('value').toInt(),
+					hours: selectedHours,
 					minutes: minutesInput.get('value').toInt()
 				});
 				fn(date.clone());

Source/datepicker_bootstrap/_mixins_and_vars.scss

@@ -1,4 +1,5 @@
 // Colors
+$backgroundColor            : #fff;
 $gray                       : #777;
 $grayLight                  : #999;
 $grayLightBetween           : #CCC;

Source/datepicker_bootstrap/datepicker_bootstrap.css

@@ -144,11 +144,38 @@
       display: inline-block; }
   .datepicker_bootstrap .time .hour,
   .datepicker_bootstrap .time .separator,
-  .datepicker_bootstrap .time .minutes {
+  .datepicker_bootstrap .time .minutes,
+  .datepicker_bootstrap .time .ampmWrapper {
     width: 3em;
     font-size: 1.5em;
     text-align: center;
     padding: 0.2em; }
+  .datepicker_bootstrap .time .ampmWrapper {
+    text-transform: uppercase;
+    font-size: 0.825em;
+    float: right;
+    margin: -0.5em 0.5em 0 0; }
+    .datepicker_bootstrap .time .ampmWrapper a {
+      text-decoration: none;
+      display: block;
+      color: #cccccc;
+      line-height: 1.5;
+      border: 1px solid white;
+      -webkit-border-radius: 2px;
+      -moz-border-radius: 2px;
+      border-radius: 2px; }
+      .datepicker_bootstrap .time .ampmWrapper a.am {
+        margin-bottom: 0.25em; }
+      .datepicker_bootstrap .time .ampmWrapper a:hover {
+        background-color: #eeeeee; }
+      .datepicker_bootstrap .time .ampmWrapper a:active {
+        -webkit-box-shadow: inset 0 1px 5px #999999;
+        -moz-box-shadow: inset 0 1px 5px #999999;
+        box-shadow: inset 0 1px 5px #999999; }
+      .datepicker_bootstrap .time .ampmWrapper a.active {
+        border-color: #ccc;
+        background-color: #fbfbfb;
+        color: #049cdb; }
   .datepicker_bootstrap .time .separator {
     width: 1em; }
   .datepicker_bootstrap .time .ok:active {

Source/datepicker_bootstrap/datepicker_bootstrap.scss

@@ -42,7 +42,7 @@ $datepicker-header-height: 2.5em;
     line-height     : normal;
     width           : $datepicker-width;
     padding         : 0.3em;
-    background-color: white;
+    background-color: $backgroundColor;
     border          : 1px solid $grayLightBetween;
     @include box-shadow(0 5px 10px rgba(0,0,0,0.2));
     @include border-radius(3px);
@@ -73,8 +73,8 @@ $datepicker-header-height: 2.5em;
             overflow            : hidden;
             top                 : 1em;
             display             : block;
-            border-top          : 6px solid white;
-            border-bottom       : 6px solid white;
+            border-top          : 6px solid $backgroundColor;
+            border-bottom       : 6px solid $backgroundColor;
             height              : 0px;
         }
         .previous {
@@ -181,12 +181,47 @@ $datepicker-header-height: 2.5em;
 
     .time .hour,
     .time .separator,
-    .time .minutes {
+    .time .minutes,
+	.time .ampmWrapper {
         width       : 3em;
         font-size   : 1.5em;
         text-align  : center;
         padding     : 0.2em;
     }
+
+	.time .ampmWrapper {
+		text-transform: uppercase;
+		font-size: 0.825em;
+		float: right;
+		margin: -0.5em 0.5em 0 0;
+
+		a {
+			text-decoration: none;
+			display: block;
+			color: $grayLightBetween;
+			line-height: 1.5;
+			border: 1px solid $backgroundColor;
+			@include border-radius(2px);
+
+			&.am {
+				margin-bottom: 0.25em;
+			}
+
+			&:hover {
+        		background-color: $grayLighter;
+			}
+
+			&:active {
+        		@include box-shadow(inset 0 1px 5px $grayLight);
+			}
+
+			&.active {
+				border-color: #ccc;
+				background-color: lighten($grayLighter, 5%);
+				color: $selectedColor;
+			}
+		}
+	}
 
     .time .separator {
         width: 1em;
@@ -207,7 +242,7 @@ $datepicker-header-height: 2.5em;
         box-shadow      : none;
         border          : solid 1px #CCC;
         outline         : none;
-        background-color: white;
+        background-color: $backgroundColor;
         @include border-radius(2px);
     }
 }

Test/timepicker.html

@@ -12,12 +12,14 @@
 
 	<link href="style.css" rel="stylesheet" />
 	<link href="../Source/datepicker.css" rel="stylesheet">
+	<link href="../Source/datepicker_bootstrap/datepicker_bootstrap.css" rel="stylesheet">
 
 	<script>
 
 	window.addEvent('domready', function(){
 		myPicker = new Picker.Date($$('input'), {
 			pickOnly: 'time',
+			pickerClass: 'datepicker_bootstrap',
 			timeWheelStep: 5
 		});
 	});