ZZIMG/zzframe/dists/js/timepicker.js

$(document).ready(function(){
	var hour_temp = "";
	var minute_temp = "";
	for(var i=0;i<24;i++){
		if(i<10){
			hour_temp += '<div class="select_hour">0'+i+'</div>'
		}else{
			hour_temp += '<div class="select_hour">'+i+'</div>'
		}
	}
	for(var i=0;i<60;i++){
		if(i<10){
			minute_temp += '<div class="select_minute">0'+i+'</div>'
		}else{
			minute_temp += '<div class="select_minute">'+i+'</div>'
		}
	}
	$(".select_hour_box").html(hour_temp);
	$(".select_hour_box").children().eq(0).addClass("select_option");
	$(".select_minute_box").html(minute_temp);
	$(".select_minute_box").children().eq(0).addClass("select_option");
	$(".select_hour").on("click",function(){
		var parent_height = $(".timepicker_select").offset().top;
		var this_height = $(this).offset().top;
		var scroll_height = $(".select_hour_box").scrollTop();
		var move_height = this_height - parent_height + scroll_height;
		$(".select_hour_box").animate({scrollTop:move_height},200);
		$(".select_hour_box").children().removeClass("select_option");
		$(this).addClass("select_option");
		var times = $(".select_hour_box").find(".select_option").text() + ':' + $(".select_minute_box").find(".select_option").text();
		$(".timepicker input").val(times);
	});
	$(".select_minute").on("click",function(){
		var parent_height = $(".timepicker_select").offset().top;
		var this_height = $(this).offset().top;
		var scroll_height = $(".select_minute_box").scrollTop();
		var move_height = this_height - parent_height + scroll_height;
		$(".select_minute_box").animate({scrollTop:move_height},200);
		$(".select_minute_box").children().removeClass("select_option");
		$(this).addClass("select_option");
		var times = $(".select_hour_box").find(".select_option").text() + ':' + $(".select_minute_box").find(".select_option").text();
		$(".timepicker input").val(times);
	});
	$(".timepicker_box").on("click",function(e){
		$(".timepicker_select").animate({
        		height:'show'
      	},200);
      	e.stopPropagation();
      	
	});
});
$(document).on("click",function(e){
	$(".timepicker_select").animate({
        		height:'hide'
      	},200);
      	e.stopPropagation();
});