add scrollbar

Added scrollbar in TimePicker for more usefully. In demo index.html
added example use allowTimes option

index.html

@@ -11,6 +11,8 @@
 	<input type="text" id="datetimepicker3"/><br><br>
 	<h3>Button Trigger</h3>
 	<input type="text" id="datetimepicker4"/><input id="open" type="button" value="open"/><input id="close" type="button" value="close"/>
+	<h3>TimePicker allows time</h3>
+	<input type="text" id="datetimepicker5"/><br><br>
 </body>
 <script src="jquery.js"></script>
 <script src="jquery.datetimepicker.js"></script>
@@ -36,5 +38,9 @@ $('#open').click(function(){
 $('#close').click(function(){
 	$('#datetimepicker4').datetimepicker('hide');
 });
+$('#datetimepicker5').datetimepicker({
+	datepicker:false,
+	allowTimes:['12:00','13:00','15:00','17:00','17:05','17:20','19:00','20:00'],
+});
 </script>
 </html>

jquery.datetimepicker.css

@@ -22,6 +22,14 @@
 	-ms-user-select: none;
 	user-select: none;
 }
+.xdsoft_noselect{
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
 .xdsoft_datetimepicker.xdsoft_inline{
 	display: inline-block;
 	position: static;
@@ -209,3 +217,22 @@
 .xdsoft_datetimepicker  .xdsoft_copyright{ color:#ccc !important; font-size:10px;clear:both;float:none;margin-left:8px;}
 .xdsoft_datetimepicker  .xdsoft_copyright a{ color:#eee !important;}
 .xdsoft_datetimepicker  .xdsoft_copyright a:hover{ color:#aaa !important;}
+
+
+.xdsoft_time_box{
+	position:relative;
+}
+.xdsoft_time_box > .xdsoft_scrollbar >.xdsoft_scroller{
+	background:#ccc !important;
+	height:20px;
+	border-radius:3px;
+}
+.xdsoft_time_box > .xdsoft_scrollbar{
+	position:absolute;
+	width:7px;
+	width:7px;
+	right:0px;
+	top:0px;
+	bottom:0px;
+	cursor:pointer;
+}

jquery.datetimepicker.js

@@ -69,6 +69,7 @@
 			prev : 'xdsoft_prev',
 			dayOfWeekStart:0,
 			timeHeightInTimePicker:25,
+			timepickerScrollbar:true,
 		};
 		var options = ($.isPlainObject(opt)||!opt)?$.extend({},default_options,opt):$.extend({},default_options);
 		var createDateTimePicker = function( input ){
@@ -78,7 +79,12 @@
 				mounth_picker = $('<div class="xdsoft_mounthpicker"><button class="xdsoft_prev"></button><div class="xdsoft_label xdsoft_month"></div><div class="xdsoft_label xdsoft_year"></div><button class="xdsoft_next"></button></div>'),
 				calendar = $('<div class="xdsoft_calendar"></div>'),
 				timepicker = $('<div class="xdsoft_timepicker active"><button class="xdsoft_prev"></button><div class="xdsoft_time_box"></div><button class="xdsoft_next"></button></div>'),
-				timebox = $('<div class="xdsoft_time_variant"></div>');
+				timeboxparent = timepicker.find('.xdsoft_time_box').eq(0),
+				timebox = $('<div class="xdsoft_time_variant"></div>'),
+				scrollbar = $('<div class="xdsoft_scrollbar"></div>'),
+				scroller = $('<div class="xdsoft_scroller"></div>');
+			
+			
 			datetimepicker.setOptions = function( _options ){
 				options = $.extend({},options,_options);
 				if( options.inline ){
@@ -102,12 +108,73 @@
 					options.dayOfWeekStart = 0;
 				else 
 					options.dayOfWeekStart = parseInt(options.dayOfWeekStart);
+				if( !options.timepickerScrollbar )
+					scrollbar.hide();
 				options.dayOfWeekStartPrev = (options.dayOfWeekStart==0)?6:options.dayOfWeekStart-1;
 			};
 			datetimepicker.data('options',options);
 			datetimepicker.on('mousedown',function( event ){
 				event.stopPropagation();
 			});
+			// scrollbar for timepicker
+			scrollbar.append(scroller);
+			timepicker.find('.xdsoft_time_box').append(scrollbar);
+			(function(){
+				var move = 0;
+				scroller.on('mousedown',function( event ){
+					var pageY = event.pageY,
+						top = parseInt(scroller.css('margin-top')),
+						h1 = scrollbar[0].offsetHeight;
+					$('body').addClass('xdsoft_noselect');
+					$(window).on('mouseup',function(){
+						$(window).off('mouseup',arguments.callee);
+						$(window).off('mousemove',move);
+						$('body').removeClass('xdsoft_noselect');
+					})
+					.on('mousemove',move = function(event){
+						var offset = event.pageY-pageY+top;
+						if( offset<0 )
+							offset = 0;
+						if( offset+scroller[0].offsetHeight>h1 )
+							offset = h1-scroller[0].offsetHeight;
+						
+						scroller.css('margin-top',offset);
+						datetimepicker.trigger('scroll.scrollbar',[offset]);
+					});
+				});
+				datetimepicker.on('scroll.timebox',function( event,offset ){
+					if( !options.timepickerScrollbar )
+						return;
+					var sbh 	= scrollbar.height()-scroller[0].offsetHeight,
+						pheight = timeboxparent[0].offsetHeight,
+						height 	= timebox[0].offsetHeight,
+						percent = offset/(height-pheight);
+					scroller.css('margin-top',sbh*percent);
+				})
+				.on( 'open.xdsoft',function( event ){
+					if( !options.timepickerScrollbar )
+						return;
+					var pheight = timeboxparent[0].offsetHeight;
+						height 	= timebox[0].offsetHeight,
+						percent = pheight/height,
+						sh = percent*scrollbar[0].offsetHeight;
+					if( percent>1 )
+						scroller.hide();
+					else{
+						scroller.show();
+						scroller.css('height',parseInt(sh>10?sh:10));
+					}
+				});
+				
+			})();
+			
+			datetimepicker.on('scroll.scrollbar',function(event,offset){
+				var sbh = scrollbar[0].offsetHeight-scroller[0].offsetHeight,
+					percent = offset/sbh;
+					pheight = timeboxparent[0].offsetHeight,
+					height = timebox[0].offsetHeight;
+				timebox.css('marginTop',-parseInt((height-pheight)*percent))
+			});
 			timepicker.find('.xdsoft_time_box').append(timebox);
 			datetimepicker.append(datepicker).append(timepicker);
 			if( options.withoutCopyright!==true )
@@ -205,6 +272,7 @@
 					}else if( $this.hasClass(options.prev) && top-options.timeHeightInTimePicker>=0  ){
 						timebox.css('marginTop','-'+(top-options.timeHeightInTimePicker)+'px')
 					}
+					datetimepicker.trigger('scroll.timebox',[Math.abs(parseInt(timebox.css('marginTop')))]);
 					options.onChangeTime&&options.onChangeTime.call&&options.onChangeTime.call(datetimepicker,datetimepicker.data('xdsoft_datetime').currentTime,datetimepicker.data('input'));
 					period= ( period>10 )?10:period-10;
 					!stop&&(timer = setTimeout(arguments.callee,v?v:period));
@@ -285,7 +353,7 @@
 				timebox.html(time);
 				//timebox.find('.xdsoft_current').length&&timebox.css('marginTop','-'+parseInt(timebox.find('.xdsoft_current').index()*options.timeHeightInTimePicker)+'px');
 			});
-			datetimepicker.on( 'open.doksoft',function(){
+			datetimepicker.on( 'open.xdsoft',function(){
 				if( timebox.find('.xdsoft_current').length ){
 					var pheight = timebox.parent()[0].offsetHeight,
 						height = timebox[0].offsetHeight,
@@ -331,15 +399,18 @@
 			datetimepicker.mousewheel&&timepicker.mousewheel(function(event, delta, deltaX, deltaY) {
 				var pheight = timebox.parent()[0].offsetHeight,
 					height = timebox[0].offsetHeight,
-					top = Math.abs(parseInt(timebox.css('marginTop')));
+					top = Math.abs(parseInt(timebox.css('marginTop'))),
+					fl = true;
 				if( delta<0 && (height-pheight)-options.timeHeightInTimePicker>=top ){
 					timebox.css('marginTop','-'+(top+options.timeHeightInTimePicker)+'px');
-					return false;
+					fl = false;
 				}else if( delta>0&&top-options.timeHeightInTimePicker>=0 ){
 					timebox.css('marginTop','-'+(top-options.timeHeightInTimePicker)+'px');
-					return false;
+					fl = false;
 				}
+				datetimepicker.trigger('scroll.timebox',[Math.abs(parseInt(timebox.css('marginTop')))]);
 				options.onChangeTime&&options.onChangeTime.call&&options.onChangeTime.call(datetimepicker,datetimepicker.data('xdsoft_datetime').currentTime,datetimepicker.data('input'));
+				return fl;
 			});
 			var current_time_index = 0;
 			input.mousewheel&&input.mousewheel(function( event, delta, deltaX, deltaY ){
@@ -370,7 +441,7 @@
 							$(this).off('mousedown',arguments.callee);
 						});
 					}
-					datetimepicker.trigger('open.doksoft');
+					datetimepicker.trigger( 'open.xdsoft' );
 				}
 			}; 
 			datetimepicker.close = function(){