`

JS时间选择器

htmljavascript 
阅读更多

发现网上日前选择器很多，时间选择的好像不多。自己就写了一个。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> TimePicker</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script language="JavaScript">
<!--
	
	function timeShow(obj) {
		var isShow = true;
		var isFirst = true;
		var div = document.getElementById('div_' + obj.id);
		var hourSelect = document.getElementById('hourSelect_' + obj.id);
		var minSelect = document.getElementById('minSelect_' + obj.id);
		var timeTable = document.getElementById('timeTable_' + obj.id);
		var st_time;
		
		// 将文本框的值选中
		var time = obj.value;
		
		var hour;
		var minute;

		var tableString = "<table id='timeTable_" + obj.id + "' border=0 width='200px'><tr><td>时:</td><td></td><td>分:</td><td></td></tr><tr align='center'><td colspan='4'><input id='st_" + obj.id + "' type='button' value='确定'></td></tr></table>";
		
		if (time != "") {
				hour = time.split(":")[0];
				minute = time.split(":")[1];
			}
		if (isShow)
		{
			isShow = false;
			
			if (isFirst)
			{
				isFirst = false;
	
				if (div == null || div == undefined)
				{
					div = document.createElement('div');
					hourSelect = document.createElement('select');
					minSelect = document.createElement('select');
					timeTable = document.createElement('table');
					
					div.setAttribute('id','div_' + obj.id);
					hourSelect.setAttribute('id','hourSelect_' + obj.id);
					minSelect.setAttribute('id','minSelect_' + obj.id);

					for (var i=0;i<24 ;i++ )
					{
						if (i < 10)
						{
							hourSelect.options.add(new Option('0'+i,'0'+i));
						}
						else {
							hourSelect.options.add(new Option(i,i));
						}
					}

					for (var i=0;i<60 ;i++ )
					{
						if (i < 10)
						{
							
							minSelect.options.add(new Option('0'+i,'0'+i));
						}
						else {
							
							minSelect.options.add(new Option(i,i));
						}
					}

					div.innerHTML = tableString;

					// set styles
					hourSelect.style.width = '60px';
					
					minSelect.style.width = '60px';
					
					div.style.zIndex = '100';
					div.style.position = 'absolute';
					div.style.border = '1px solid blue';
					div.style.backgroundColor = '#6666FF';
					div.style.width = '80px';
					div.style.height = '50px';
					div.style.left = event.x;
					div.style.top = event.y;
					div.style.display = 'block';
					
					document.body.appendChild(div);

					var timeTable = document.getElementById('timeTable_' + obj.id);
					var hourTd = timeTable.rows[0].cells[1];
					hourTd.appendChild(hourSelect);
					var hourTd = timeTable.rows[0].cells[3];
					hourTd.appendChild(minSelect);
					
					st_time = document.getElementById('st_' + obj.id);
					
					st_time.onclick = function() {
						obj.value = hourSelect.options[hourSelect.selectedIndex].text + ':' + minSelect.options[minSelect.selectedIndex].text;
						div.style.display = 'none';
						isShow = true;
					}
					
					
					if (hour != "") {
							for (var i=0;i<hourSelect.options.length;i++) {
									if (hourSelect.options[i].text == hour) {
											hourSelect.options[i].selected = true;
										}
								}
						}
						
						if (minute != "") {
							for (var i=0;i<minSelect.options.length;i++) {
									if (minSelect.options[i].text == minute) {
											minSelect.options[i].selected = true;
										}
								}
						}
				}
				else {
					div.style.display = 'block';
				}
				
			}
			else {
				div.style.display = 'block';
			}

		}
	}
	function TimePicker(obj) {
			timeShow(obj);
	}
//-->
</script>
</head>

<body>
	<input type='text' name='starttime' id='starttime' value="07:00" onclick='TimePicker(this);'>至
	<input type='text' name='starttime2' id='starttime2' value="19:33" onclick='TimePicker(this);'>
	
	-----------------------------------------------------------------------------------------------<br>
	<input type='text' name='starttime2' id='starttime22' value="07:00" onclick='TimePicker(this);'>至
	<input type='text' name='starttime22' id='starttime222' value="19:33" onclick='TimePicker(this);'>
</body>
</html>

 

分享到：
| Birt报表开发
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics