JavaScript特效实例013-日期选择器
来源：互联网 发布：java初级题目 编辑：程序博客网 时间：2024/05/16 07:45
实例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;elseday = "";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>这样本例就做好了。
1 0
- JavaScript特效实例013-日期选择器
- javascript日期选择器
- JavaScript 日期联动选择器
- JavaScript 日期联动选择器
- javascript日期选择器
- javascript日期选择器
- [转]JavaScript日期选择器
- JavaScript 日期选择器
- JavaScript 日期联动选择器
- jQuery选择器 传统javaScript选择器实例(例子)
- 好多Javascript日期选择器呀-7
- 好多Javascript日期选择器呀-6
- 好多Javascript日期选择器呀-5
- 好多Javascript日期选择器呀-4
- 好多Javascript日期选择器呀--3
- 好多Javascript日期选择器呀--2
- 好多Javascript日期选择器呀--1
- javascript实现简单日期下拉选择器
- strange function
- chencang-----为爬虫设置User-Agent
- chencang-----是使用淘宝API获取数据好，还是利用爬虫去抓取数据好呢
- leetcode Best Time to Buy and Sell Stock II
- 第9周项目4-我的向量类
- JavaScript特效实例013-日期选择器
- Windows下amoeba安装及读写分离配置
- chencang-----labin编译错误解决办法
- NWPU省赛热身赛——D，入度和出度
- 2015年第十一周项目二：职员有薪水了（2）
- 高版本chrome不再支持window.showmodaldialog 的临时替换方案【用window.open】
- java 设计模式之状态模式
- 检测得到应用bug的错误提示信息，以文件的形式保存
- POJ 3050 Hopscotch
