码迷，mamicode.com
首页 > 编程语言 > 详细

JavaScript特效实例013-日期选择器

时间：2015-05-19 13:04:56      阅读：165      评论：0      收藏：0      [点我收藏+]

标签：javascript

实例013                              日期选择器

实例说明

    弹出日期选择器来供用户来选择日期。

技术要点

本例主要使用window对象的showModalDialog()方法实现。

实现过程

（1）用来弹出日期选择器的主页面。点击图片弹出日期选择器，然后在文本框输出选择的日期。
<!DOCTYPE html>
<html>
<head>
	<title>日期选择器</title>
	<meta charset="utf-8"/>
	<script type="text/javascript">
	function pp(field)
	{
		var rtn = window.showModalDialog("time.html","","dialogWidth:280px;dialogHeight:250px;status:no;help:no;scrolling=no;scrollbars=no");
		if(rtn!=null)
		{
			field.value=rtn;
			return;
		}
	}
	</script>
</head>
<body>
<form id="form1" name="form1">
	<input type="text" name="time1" id="time1"/>
	<img src="Images/new.jpg" width="20px" height="20px" onclick="pp(form1.time1)">
</form>
</body>
</html>

（2）日期选择器界面time.html
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8"/>
	<script type="text/javascript">
	var monthNames = new Array("","1","2","3","4","5","6","7","8","9","10","11","12");
	var endDay = new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);
	var dayNow = 0;
	var monthNow = 0;
	var yearNow = 0;
	function load(form)
	{
		set_month_year_now();
		var found = false;
		for(var month=0;month<form.monthList.length;month++)
		{
			if(form.monthList[month].text == monthNames[monthNow])
			{
				form.monthList[month].selected = true;
				found = true;
			}
		}
		if(!found)
		{
			error();
			return;
		}
		display_month(form);
	}
	function preceding_month(form)
	{
		var month_selected = form.monthList.selectedIndex;
		var year_selected = form.yearList.selectedIndex;
		if(!month_selected&&!year_selected)
		{
			error();
			return;
		}
		if(month_selected>0)
		{
			month_selected--;
		}
		else
		{
			month_selected=11;
			year_selected--;
		}
		form.monthList[month_selected].selected = true;
		form.yearList[year_selected].selected = true;
		display_month(form);
	}
	function following_month(form)
	{
		var month_selected = form.monthList.selectedIndex;
		var year_selected = form.yearList.selectedIndex;
		if(month_selected>=(form.monthList.length-1)&&year_selected>=(form.yearList.length-1))
		{
			error();
			return;
		}
		if(month_selected<11)
		{
			month_selected++;
		}
		else{
			month_selected=0;
			year_selected++;
		}
		form.monthList[month_selected].selected = true;
		form.yearList[year_selected].selected = true;
		display_month(form);
	}
	function set_month_year_now()
	{
		var form = document.calendar;
		var now = new Date();
		monthNow = now.getMonth()+1;
		yearNow = now.getYear();
		dayNow = now.getDate();
		yearNow = yearNow+1900;
		var count = 0;
		for(var i = yearNow-103;i<yearNow+50;i++)
		{
			eval("form.yearList.options[count] = new Option('"+i+"','"+i+"')");
			count++;
		}
		form.yearList.selectedIndex = 103;
		form.yearList.length = count;
	}
	function error()
	{
		alert("超出范围！");
	}
	function display_month(form)
	{
		var month = form.monthList.selectedIndex+1;
		var year = parseInt(form.yearList.options[form.yearList.selectedIndex].text);
		var start_day = start_day_in_month(year,month);
		var count = 0;
		for(var row = 0;row<6;row++)
		{
			for(var col = 0;col<7;col++)
			{
				if(row == 0&&col<(start_day-1))
					var day = "";
				else if(count<endDay[month])
					day = ++count;
				else
					day = "";
				form.dayBox[(row*7)+col].style.display = "";
				form.dayBox[(row*7)+col].style.color = "black";
				if(day=="")
				{
					form.dayBox[(row*7)+col].style.display = "none";
				}
				else{
					form.dayBox[(row*7)+col].value = day;
					if(col%7==0)
					{
						form.dayBox[(row*7)+col].style.color = "red";
					}
					if(yearNow == year&&monthNow == month&&dayNow ==day)
						form.dayBox[(row*7)+col].style.color = "blue";
				}
			}
		}
	}
	function start_day_in_month(year,month)
	{
		var sday,daynum,ndays,mnum;
		sday = start_day_in_year(year);
		endDay[2] = (year%4)?28:29;
		if(month == 1)
		{
			daynum = sday;
		}
		else{
			ndays = sday;
			for(mnum = 2;mnum<month+1;mnum++)
			{
				ndays = ndays+endDay[mnum-1];
				daynum = ndays%7;
			}
			daynum = (!daynum)?7:daynum;
			return(daynum);
		}
	}
	function start_day_in_year(year)
	{
		var y,m,d;
		var n;
		y = year-1;
		m = 13;
		d = 1;
		n = d+2*m+(Math.floor((0.6+(m+1)))+y);
		n = n+Math.floor(((y/4)-Math.floor((y/100))+Math.floor((y/400))))+2;
		n = Math.floor(((n/7-Math.floor((n/7)))*7+0.5));
		return (n+1);
	}
	function CheckDate(strDay)
	{
		var docFrm = document.calendar;
		var choice_daynum = 0;
		var current_daynum = 0;
		var day_temp;
		if(strDay!="")
		{
			var strY = docFrm.yearList.value;
			var strM = docFrm.monthList.value;
			var curr_y = new String(yearNow);
			var curr_m = new String(monthNow);
			var curr_d = new String(dayNow);
			if(curr_m.length == 1)
				curr_m = "0"+curr_m;
			if(curr_d.length == 1)
				curr_d = "0"+curr_d;
			current_daynum = new Number(curr_y+curr_m+curr_d);
			if(strM.length == 1)
				strM = "0"+strM;
			if(strDay.length == 1)
				strDay = "0"+strDay;
			choice_daynum = new Number(strY+strM+strDay);
			parent.window.returnValue = strY+"-"+strM+"-"+strDay;
			parent.window.close();
		}
		return false;
	}
	</script>
</head>
<body onLoad="load(document.calendar)" topmargin="0">
<center>
	<form name="calendar">
		<table border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td colspan="3" height="24"></td>
			</tr>
			<tr>
				<td width="205" align="right" valign="middle" nowrap="nowrap">
					<select name="yearList" onchange="display_month(this.form)">
						
					</select>
				</td>
				<td width="65" nowrap="nowrap" align="left">
					<select name="monthList" size="1" onchange="display_month(this.form)">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
					</select>
				</td>
				<td width="10"></td>
			</tr>
			<tr>
				<td colspan="3" height="6"></td>
			</tr>
			<tr>
				<td colspan="3">
					<table border="0" cellpadding="1" cellspacing="0" align="center">
						<tr>
							<td bgcolor="#82664F">
								<table border="0" cellspacing="0" cellpadding="0">
									<tr bgcolor="#82664F" height="18">
										<td width="31" align="center" nowrap="nowrap" bgcolor="#0099FF">
											<font color="#FF0000">日</font>
										</td>
										<td width="31" align="center" nowrap="nowrap" bgcolor="#0099FF">
											一
										</td>
										<td width="31" align="center" nowrap="nowrap" bgcolor="#0099FF">
											二
										</td>
										<td width="31" align="center" nowrap="nowrap" bgcolor="#0099FF">
											三
										</td>
										<td width="31" align="center" nowrap="nowrap" bgcolor="#0099FF">
											四
										</td>
										<td width="31" align="center" nowrap="nowrap" bgcolor="#0099FF">
											五
										</td>
										<td width="31" align="center" nowrap="nowrap" bgcolor="#0099FF">
											六
										</td>
									</tr>
									<tr bgcolor="#FFFFFF" height="18">
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
									</tr>
									<tr bgcolor="#FFFFFF" height="18">
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
									</tr>
									<tr bgcolor="#FFFFFF" height="18">
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
									</tr>
									<tr bgcolor="#FFFFFF" height="18">
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
									</tr>
									<tr bgcolor="#FFFFFF" height="18">
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
									</tr>
									<tr bgcolor="#FFFFFF" height="18">
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
										<td align="center">
											<input type="text" size="2" name="dayBox" readOnly onclick="javascript:CheckDate(this.value);" onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'"/>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</form>
</center>
</body>
</html>

这样本例就做好了。

JavaScript特效实例013-日期选择器

标签：javascript

原文地址：http://blog.csdn.net/yejinwei1220/article/details/45843245
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！