js实现日期选择器的两种方法（默认展示为最近一周）

2023-04-15 16:42:01JavaScript016

js实现日期选择器的两种方法（默认展示为最近一周）,第1张

方法一：

读取当前日期，再将day-7，判断day<=0针对不同月份的显示情况：

方法二：

先读取当前日期，再读取七天前日期。

显然，第二种方法简便了很多。

给你推荐一个间断兼容性比较好JS代码！

<html>

<head>

<title>Js日期选择器并自动加入到输入框中</title>

var gMonths=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月")

var WeekDay=new Array("日","一","二","三","四","五","六")

var strToday="今天"

var strYear="年"

var strMonth="月"

var strDay="日"

var splitChar="-"

var startYear=2000

var endYear=2050

var dayTdHeight=12

var dayTdTextSize=12

var gcNotCurMonth="#E0E0E0"

var gcRestDay="#FF0000"

var gcWorkDay="#444444"

var gcMouseOver="#79D0FF"

var gcMouseOut="#F4F4F4"

var gcToday="#444444"

var gcTodayMouseOver="#6699FF"

var gcTodayMouseOut="#79D0FF"

var gdCtrl=new Object()

var goSelectTag=new Array()

var gdCurDate=new Date()

var giYear=gdCurDate.getFullYear()

var giMonth=gdCurDate.getMonth()+1

var giDay=gdCurDate.getDate()

function $(){var elements=new Array()for(var i=0i<arguments.lengthi++) {var element=arguments[i]if(typeof(arguments[i])=='string'){element=document.getElementById(arguments[i])}if(arguments.length==1){return element}elements.Push(element)}return elements}

Array.prototype.Push=function(){var startLength=this.lengthfor(var i=0i<arguments.lengthi++){this[startLength+i]=arguments[i]}return this.length}

String.prototype.HexToDec=function(){return parseInt(this,16)}

String.prototype.cleanBlank=function(){return this.isEmpty()?"":this.replace(/\s/g,"")}

function checkColor(){var color_tmp=(arguments[0]+"").replace(/\s/g,"").toUpperCase()var model_tmp1=arguments[1].toUpperCase()var model_tmp2="rgb("+arguments[1].substring(1,3).HexToDec()+","+arguments[1].substring(1,3).HexToDec()+","+arguments[1].substring(5).HexToDec()+")"model_tmp2=model_tmp2.toUpperCase()if(color_tmp==model_tmp1 ||color_tmp==model_tmp2){return true}return false}

function $V(){return $(arguments[0]).value}

function fPopCalendar(evt,popCtrl,dateCtrl){evt.cancelBubble=truegdCtrl=dateCtrlfSetYearMon(giYear,giMonth)var point=fGetXY(popCtrl)with($("calendardiv").style){left=point.x+"px"top=(point.y+popCtrl.offsetHeight+1)+"px"visibility='visible'zindex='99'position='absolute'}$("calendardiv").focus()}

function fSetDate(iYear,iMonth,iDay){var iMonthNew=new String(iMonth)var iDayNew=new String(iDay)if(iMonthNew.length<2){iMonthNew="0"+iMonthNew}if(iDayNew.length<2){iDayNew="0"+iDayNew}gdCtrl.value=iYear+splitChar+iMonthNew+splitChar+iDayNewfHideCalendar()}

function fHideCalendar(){$("calendardiv").style.visibility="hidden"for(var i=0i<goSelectTag.lengthi++){goSelectTag[i].style.visibility="visible"}goSelectTag.length=0}

function fSetSelected(){var iOffset=0var iYear=parseInt($("tbSelYear").value)var iMonth=parseInt($("tbSelMonth").value)var aCell=$("cellText"+arguments[0])aCell.bgColor=gcMouseOutwith(aCell){var iDay=parseInt(innerHTML)if(checkColor(style.color,gcNotCurMonth)){iOffset=(innerHTML>10)?-1:1}iMonth+=iOffsetif(iMonth<1){iYear--iMonth=12}else if(iMonth>12){iYear++iMonth=1}}fSetDate(iYear,iMonth,iDay)}

function Point(iX,iY){this.x=iXthis.y=iY}

function fBuildCal(iYear,iMonth){var aMonth=new Array()for(var i=1i<7i++){aMonth[i]=new Array(i)}var dCalDate=new Date(iYear,iMonth-1,1)var iDayOfFirst=dCalDate.getDay()var iDaysInMonth=new Date(iYear,iMonth,0).getDate()var iOffsetLast=new Date(iYear,iMonth-1,0).getDate()-iDayOfFirst+1var iDate=1var iNext=1for(var d=0d<7d++){aMonth[1][d]=(d<iDayOfFirst)?(iOffsetLast+d)*(-1):iDate++}for(var w=2w<7w++){for(var d=0d<7d++){aMonth[w][d]=(iDate<=iDaysInMonth)?iDate++:(iNext++)*(-1)}}return aMonth}

function fDrawCal(iYear,iMonth,iCellHeight,iDateTextSize){var colorTD=" bgcolor='"+gcMouseOut+"' bordercolor='"+gcMouseOut+"'"var styleTD=" valign='middle' align='center' style='height:"+iCellHeight+"pxfont-weight:bolderfont-size:"+iDateTextSize+"px"var dateCal=""dateCal+="<tr>"for(var i=0i<7i++){dateCal+="<td"+colorTD+styleTD+"color:#990099'>"+WeekDay[i]+"</td>"}dateCal+="</tr>"for(var w=1w<7w++){dateCal+="<tr>"for(var d=0d<7d++){var tmpid=w+""+ddateCal+="<td"+styleTD+"cursor:pointer' onclick='fSetSelected("+tmpid+")'>"dateCal+="<span id='cellText"+tmpid+"'></span>"dateCal+="</td>"}dateCal+="</tr>"}return dateCal}

function fUpdateCal(iYear,iMonth){var myMonth=fBuildCal(iYear,iMonth)var i=0for(var w=1w<7w++){for(var d=0d<7d++){with($("cellText"+w+""+d)){parentNode.bgColor=gcMouseOutparentNode.borderColor=gcMouseOutparentNode.onmouseover=function(){this.bgColor=gcMouseOver}parentNode.onmouseout=function(){this.bgColor=gcMouseOut}if(myMonth[w][d]<0){style.color=gcNotCurMonthinnerHTML=Math.abs(myMonth[w][d])}else{style.color=((d==0)||(d==6))?gcRestDay:gcWorkDayinnerHTML=myMonth[w][d]if(iYear==giYear &&iMonth==giMonth &&myMonth[w][d]==giDay){style.color=gcTodayparentNode.bgColor=gcTodayMouseOutparentNode.onmouseover=function(){this.bgColor=gcTodayMouseOver}parentNode.onmouseout=function(){this.bgColor=gcTodayMouseOut}}}}}}}

function fSetYearMon(iYear,iMon){$("tbSelMonth").options[iMon-1].selected=truefor(var i=0i<$("tbSelYear").lengthi++){if($("tbSelYear").options[i].value==iYear){$("tbSelYear").options[i].selected=true}}fUpdateCal(iYear,iMon)}

function fPrevMonth(){var iMon=$("tbSelMonth").valuevar iYear=$("tbSelYear").valueif(--iMon<1){iMon=12iYear--}fSetYearMon(iYear,iMon)}

function fNextMonth(){var iMon=$("tbSelMonth").valuevar iYear=$("tbSelYear").valueif(++iMon>12){iMon=1iYear++}fSetYearMon(iYear,iMon)}

function fGetXY(aTag){var oTmp=aTagvar pt=new Point(0,0)do{pt.x+=oTmp.offsetLeftpt.y+=oTmp.offsetTopoTmp=oTmp.offsetParent}while(oTmp.tagName.toUpperCase()!="BODY")return pt}

function getDateDiv(){var noSelectForIE=""var noSelectForFireFox=""if(document.all){noSelectForIE="onselectstart='return false'"}else{noSelectForFireFox="-moz-user-select:none"}var dateDiv=""dateDiv+="<div id='calendardiv' onclick='event.cancelBubble=true' "+noSelectForIE+" style='"+noSelectForFireFox+"position:absolutez-index:99visibility:hiddenborder:1px solid #999999'>"dateDiv+="<table border='0' bgcolor='#E0E0E0' cellpadding='1' cellspacing='1' >"dateDiv+="<tr>"dateDiv+="<td><input type='button' id='PrevMonth' value='<' style='height:20pxwidth:20pxfont-weight:bolder' onclick='fPrevMonth()'>"dateDiv+="</td><td><select id='tbSelYear' style='border:1px solid' onchange='fUpdateCal($V(\"tbSelYear\"),$V(\"tbSelMonth\"))'>"for(var i=startYeari<endYeari++){dateDiv+="<option value='"+i+"'>"+i+strYear+"</option>"}dateDiv+="</select></td><td>"dateDiv+="<select id='tbSelMonth' style='border:1px solid' onchange='fUpdateCal($V(\"tbSelYear\"),$V(\"tbSelMonth\"))'>"for(var i=0i<12i++){dateDiv+="<option value='"+(i+1)+"'>"+gMonths[i]+"</option>"}dateDiv+="</select></td><td>"dateDiv+="<input type='button' id='NextMonth' value='>' style='height:20pxwidth:20pxfont-weight:bolder' onclick='fNextMonth()'>"dateDiv+="</td>"dateDiv+="</tr><tr>"dateDiv+="<td align='center' colspan='4'>"dateDiv+="<div style='background-color:#cccccc'><table width='100%' border='0' cellpadding='3' cellspacing='1'>"dateDiv+=fDrawCal(giYear,giMonth,dayTdHeight,dayTdTextSize)dateDiv+="</table></div>"dateDiv+="</td>"dateDiv+="</tr><tr><td align='center' colspan='4' nowrap>"dateDiv+="<span style='cursor:pointerfont-weight:bolder' onclick='fSetDate(giYear,giMonth,giDay)' onmouseover='this.style.color=\""+gcMouseOver+"\"' onmouseout='this.style.color=\"#000000\"'>"+strToday+":"+giYear+strYear+giMonth+strMonth+giDay+strDay+"</span>"dateDiv+="</tr></tr>"dateDiv+="</table></div>"return dateDiv}

with(document){onclick=fHideCalendarwrite(getDateDiv())}

</script>

</head>

<body>

</body>

</html>

参考资料： http://www.tswzsj.com/html/wzjsxw/287.html

限制时间有两种方式：

将字符串转换为Date类型进行对比，直接对比。如

var a=new Date('2011-01-01')

var b=new Date('2012-01-01')

if(a<b){alert('1')}else{alert('2')}