jquery timepicker

amos_tl

浏览: 343514 次
性别:
来自: 长沙

最近访客更多访客>>

495127903

huanggua12353719

gaojingsong

我想与我思

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>jQuery-timepicker</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<link rel="stylesheet" href="css/jquery.timepicker.css" type="text/css" />

	<script src="lib/jquery-1.7.2.js"></script>
	<script src="lib/jquery.timepicker.js"></script>

</head>
<body>
	<h1>jQuery TimePicker 示例</h1>
	<form>
		<input type="hidden" name="time_holder" class="timepicker-el" readonly="readonly" maxlength="5"></input>
		<div class="timepicker unselected" unselectable="on" onselectstart="return false;">
			<div class="timepicker-body">
				<input type="input" value="00" class="time hr" maxlength="2" min="0" max="23" readonly="readonly"></input>
				<input type="input" class="sep sep1 unselected" disabled="disabled" readonly="readonly" value=":"></input>
				<input type="input" value="00" class="time mi" maxlength="2" min="0" max="59" readonly="readonly"></input>
				
				<input type="input" class="sep sep2 unselected" disabled="disabled" readonly="readonly" value=":"></input>
				<input type="input" value="00" class="time ms" maxlength="2" min="0" max="59" readonly="readonly"></input>
				
				<input type="button" class="clear" value="x" readonly="readonly"></input>
			</div>
			<span class="up">+</span>
			<span class="down">-</span>
		</div>
	</form>
</body>
</html>

jquery.timepicker.js

 $(function(){
		$('.timepicker .timepicker-body input.time').on('click', function(e) {
			$(e.currentTarget).select().addClass('selected').siblings().removeClass('selected');
		});
		
		$('.timepicker .up').on('click', function() {
			var $target = $('.timepicker .timepicker-body input.selected');
			
			if ($target.length == 0) {
				$target = $('.timepicker .timepicker-body input.hr').select().addClass('selected');
				$target.siblings().removeClass('selected');
			}
			
			var min = parseInt($target.attr('min'));
			var max = parseInt($target.attr('max'));
			var value = parseInt($target.val()) + 1;
			var length = String(value).length;
			if (length > 2 || value > max) {
				value = '00';
			}
			else if (value < min) {
				value = max;
			}
			if (length == 1) {
				value = '0' + String(value);
			}
			$target.val(value);
			$('input[name=time_holder]').val($('.timepicker input.hr').val() + ":" + $('.timepicker input.mi').val() + ($('.timepicker input.ms').val() ?  ':' + $('.timepicker input.ms').val() : ''));
			
			$target.select();
		});
		
		$('.timepicker .down').on('click', function() {
			var $target = $('.timepicker .timepicker-body input.selected');
			
			if ($target.length == 0) {
				$target = $('.timepicker .timepicker-body input.hr').select().addClass('selected');
				$target.siblings().removeClass('selected');
			}
			
			var min = parseInt($target.attr('min'));
			var max = parseInt($target.attr('max'));
			var value = parseInt($target.val()) - 1;
			var length = String(value).length;
			if (length > 2 || value > max) {
				value = '00';
			}
			else if (value < min) {
				value = max;
			}
			
			if (length == 1) {
				value = '0' + String(value);
			}
			
			$target.val(value);
			$('input[name=time_holder]').val($('.timepicker input.hr').val() + ":" + $('.timepicker input.mi').val() + ($('.timepicker input.ms').val() ? ':' + $('.timepicker input.ms').val() : ''));
			
			$target.select();
		});
		
		$('.timepicker input.clear').on('click', function() {
			var now = new Date();
			var hr = now.getHours();
			var mi = now.getMinutes();
			var ms = now.getSeconds();
			hr = String(hr).length == 1 ? '0' + String(hr) : String(hr);
			mi = String(mi).length == 1 ? '0' + String(mi) : String(mi);
			ms = String(ms).length == 1 ? '0' + String(ms) : String(ms);
			
			var value = hr + ":" + mi + ($('.timepicker input.ms').val() ? ":" + ms : "");
		
			$('.timepicker input.hr').val(hr);
			$('.timepicker input.mi').val(mi);
			$('.timepicker input.ms').val(ms);
			$('input[name=time_holder]').val(value);
			
			$('.timepicker .timepicker-body input.time').removeClass('selected');
		});
		
	})

jquery.timepicker.css

body {
	background-color: #FFF;
}

.timepicker {
	width: 102px;
	height: 20px;
	position: relative;
	display: inline-block;
	float: left;
	border: 1px solid gray;
}


.timepicker-body {
	position: absolute;
	left: 1px;
	top: 1px;
	width: 82px;
	height: 20px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

.hr {
	width: 14px;
	height: 16px;
	border: 0px;
	outline: 0px;
	margin: 0px;
	background: #FFF;
}

.sep {
	width: 4px;
	height: 18px;
	border: 0px;
	outline: 0px;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	background: #FFF;
}

.sep1 {
	position: absolute;
	left: 17px;
	left\0: 16px;
}

.sep2 {
	position: absolute;
	left: 40px;
	left\0: 34px;
	background: #FFF;
}

.mi {
	width: 14px;
	height: 16px;
	border: 0px;
	outline: 0px;
	margin: 0px;
	padding: 0px;
	background: #FFF;
}

.ms {
	width: 14px;
	height: 16px;
	border: 0px;
	outline: 0px;
	margin: 0px;
	padding: 0px;
	background: #FFF;
}

.clear {
	position: absolute;
	right: 3px;
	top: 0px;
	width: 8px;
	height: 18px;
	border: 0px;
	background: #FFF;
	outline: 0px;
	color: #555;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	border-radius: 3px;
	cursor: pointer;
}

.clear:hover {
	color: #000;
}

.up {
	position: absolute;
	right: 3px;
	top: -4px;
	width: 16px;
	height: 14px;
	border: 0px;
	background: #555;
	outline: 0px;
	color: white;
	font-weight: bold;
	text-align: center;
	font-size: 8px;
	overflow: hidden;
	border-radius: 3px;
	cursor: pointer;
	vertical-align: middle;
}

.up:hover {
	background: #000;
}

.down {
	position: absolute;
	right: 3px;
	top: 11px;
	width: 16px;
	height: 14px;
	border: 0px;
	background: #555;
	outline: 0px;
	color: white;
	font-weight: bold;
	text-align: center;
	font-size: 6px;
	overflow: hidden;
	border-radius: 3px;
	cursor: pointer;
	vertical-align: middle;
}

.down:hover {
	background: #000;
}

.unselected {
	-moz-user-select:none;
	-webkit-user-select:none;
}

效果: