js如何创建那个日期选择框啊

2023-03-21 15:31:02JavaScript022

js如何创建那个日期选择框啊,第1张

给你推荐一个间断兼容性比较好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

一下好一款laydate.js日期时间选择插件，具有一定的参考价值，希望可以帮到你

日期时间选择插件laydate.js：

效果图：

1. 引入JS。

2. 根据需要做相应的配置。详情参看官网

laydate({

elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'

event: 'focus', //响应事件。如果没有传入event，则按照默认的click

format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月

festival: true, //显示节日

istime: true, //显示时间选项

choose: function(datas){ //选择日期完毕的回调

alert('得到：'+datas)

}

})

</script>

实例源码：

<!DOCTYPE html>

<html>

<head>

<!--

-->

<title>layDate日期时间选择插件</title>

</head>

<body>

Way1,

请选择日期:<input type="text" name="date" onclick="laydate()" />

<hr />

Way2,

laydate({

elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'

event: 'focus', //响应事件。如果没有传入event，则按照默认的click

format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月

festival: true, //显示节日

istime: true, //显示时间选项

choose: function(datas){ //选择日期完毕的回调

alert('得到：'+datas)

}

})

</script>

Way3,

</form>

</body>

</html>

今天做日期控件，需求要求设置一个时间范围限制，选择从今天开始的日期才可以选择，今天以前都不可以选择

主要体现在bootstrap-datetimepicker控件下面的2个日期参数

weekStart: 1,

startDate:new Date(日期),

引用的基础库有

HTML代码

复制代码

<label for="dtp_input3" class="col-md-2 control-label">time start</label>

</div>

</div>

复制代码

JS代码

复制代码

var newDate = new Date()

var t = newDate.toJSON()

$('.form_date_start').datetimepicker({

format: 'yyyy-mm-dd',

language: 'fr',

weekStart: 1,

todayBtn: 1,

autoclose: 1,

todayHighlight: 1,

startView: 2,

minView: 2,

forceParse: 0,

weekStart: 1,

startDate:new Date(t),

})

复制代码

附：精确到分的时间、年月日、时间、年月、月日、从今天开始、到今天结束

HTML

复制代码

<label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>

</div>

</div>

<label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>

</div>

</div>

<label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>

</div>

</div>

<label for="dtp_input3" class="col-md-2 control-label">month Picking</label>

</div>

</div>

<label for="dtp_input3" class="col-md-2 control-label">month date Picking</label>

</div>

</div>

<label for="dtp_input3" class="col-md-2 control-label">year Picking</label>

</div>

</div>

<label for="dtp_input3" class="col-md-2 control-label">time start</label>

</div>

</div>

</div>

</div>

</fieldset>

</form>

</div>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：JSP页面中怎么引入js文件？

# 下一篇：怎样在电脑上直接发送短信息到手机上，如何设置？

推荐阅读

热门文章

最新发布

标签列表

js如何创建那个日期选择框啊

给您推荐相同类型的内容：