javascript 表单日期选择效果 时间:2020-05-12 人气:0 Agenda <script language="JavaScript1.2"> </script> 年 月 今天: <script>document.write(years + "-" + months + "-" + days)</script> <script language="JavaScript1.2"> ShowYear.innerText=years; ShowMon.innerText=months; Cal_Tab.innerHTML=Calendar(years,months-1); ShowPlan(years,(months-1),days); </script> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] <script language=javascript> var DS_x,DS_y; function dateSelector() //构造dateSelector对象,用来实现一个日历形式的日期输入框。 { var myDate=new Date(); this.year=myDate.getFullYear(); //定义year属性,年份,默认值为当前系统年份。 this.month=myDate.getMonth()+1; //定义month属性,月份,默认值为当前系统月份。 this.date=myDate.getDate(); //定义date属性,日,默认值为当前系统的日。 this.inputName=''; //定义inputName属性,即输入框的name,默认值为空。注意:在同一页中出现多个日期输入框,不能有重复的name! this.display=display; //定义display方法,用来显示日期输入框。 } function display() //定义dateSelector的display方法,它将实现一个日历形式的日期选择框。 { var week=new Array('日','一','二','三','四','五','六'); document.write(""); document.write(""); document.write("选择日期"); document.write(""); document.write(" "); document.write(" "); document.write(" "); document.write(" <<"); document.write(" <"); document.write(" "+this.year+"年"+this.month+"月"); document.write(" >"); document.write(" >>"); document.write(" "); document.write(" "); document.write(" "); document.write(" "); for(i=0;i<7;i++) document.write(" "+week[i]+""); document.write(" "); document.write(" "); document.write(" "); for(i=0;i<6;i++) { document.write(" "); for(j=0;j<7;j++) document.write(" "); document.write(" "); } document.write(" "); document.write(" 【关闭】"); document.write(" "); document.write(""); dateShow(document.all("DS_"+this.inputName).nextSibling.nextSibling.childNodes[0].childNodes[2],this.year,this.month) } function subYear(obj) //减小年份 { var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes; myObj[0].innerHTML=eval(myObj[0].innerHTML)-1; dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML)) } function addYear(obj) //增加年份 { var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes; myObj[0].innerHTML=eval(myObj[0].innerHTML)+1; dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML)) } function subMonth(obj) //减小月份 { var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes; var month=eval(myObj[2].innerHTML)-1; if(month==0) { month=12; subYear(obj); } myObj[2].innerHTML=month; dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML)) } function addMonth(obj) //增加月份 { var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes; var month=eval(myObj[2].innerHTML)+1; if(month==13) { month=1; addYear(obj); } myObj[2].innerHTML=month; dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML)) } function dateShow(obj,year,month) //显示各月份的日 { var myDate=new Date(year,month-1,1); var today=new Date(); var day=myDate.getDay(); var selectDate=obj.parentNode.parentNode.previousSibling.previousSibling.value.split('-'); var length; switch(month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: length=31; break; case 4: case 6: case 9: case 11: length=30; break; case 2: if((year%4==0)&&(year%100!=0)||(year%400==0)) length=29; else length=28; } for(i=0;i var myDate=new dateSelector(); myDate.year--; myDate.inputName='start_date'; //注意这里设置输入框的name,同一页中日期输入框,不能出现重复的name。 myDate.display(); </script> 到 <script language=javascript> myDate.year++; myDate.inputName='end_date'; //注意这里设置输入框的name,同一页中的日期输入框,不能出现重复的name。 myDate.display(); </script> My Js Collection! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 加载全部内容