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

JavaScript014

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

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

<html>

<head>

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

<meta http-equiv="content-Type" content="text/htmlcharset=gb2312">

<script type="text/javascript">

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>

<input type="text" style="border:1px solid #999" onclick="fPopCalendar(event,this,this)" onfocus="this.select()" readonly="readonly" />

</body>

</html>

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

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

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

效果图:

1. 引入JS。 

<script type="text/javascript" src="js/laydate.js"></script>

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

<script>

 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> 

 <meta charset="utf-8"> 

 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

 <meta name="viewport" content="width=device-width, initial-scale=1"> 

 <!-- 

 <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> 

 <link href="favicon.ico" rel="Bookmark" type="image/x-icon" /> 

 -->

 <meta name="Generator" content="EditPlus®"> 

 <meta name="Author" content=""> 

 <meta name="Keywords" content=""> 

 <meta name="Description" content=""> 

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

 <link href="" rel="stylesheet" /> 

 <script type="text/javascript" src="js/laydate.js"></script> 

</head> 

<body> 

 <form method="post" action=""> 

 Way1, 

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

  <hr /> 

 Way2, 

  <input type="text" name="date" id='seldate' class="laydate-icon" /><hr /> 

  <script> 

   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, 

  <input id="seldate1"> 

  <span class="laydate-icon" onclick="laydate({elem:'#seldate1'})"></span> 

 </form> 

</body> 

</html>

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

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

weekStart: 1, 

startDate:new Date(日期),

引用的基础库有

<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>

<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>

<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

HTML代码

复制代码

<div class="form-group">

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

    <div class="input-group date form_date_start col-md-3">

        <input class="form-control" size="16" type="text" value="" readonly>

        <span class="input-group-addon"><span class="glyphiwww.meidiyazx.com/sitemap.xml"></span></span>

        <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>

    </div>

    <input type="hidden" id="dtp_input3" value="" />

</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

复制代码

<div class="container">

    <form action="" class="form-horizontal"  role="form">

        <fieldset>

            <legend>Test</legend>

            <div class="form-group">

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

                <div class="input-group date form_datetime col-md-5"   >

                    <input class="form-control" size="16" type="text" value="" readonly>

                    <span class="input-group-addon"><span class="glyphiwww.meidiyazx.com/sitemap.xml"></span></span>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>

                </div>

                <input type="hidden" id="dtp_input1" value="" /><br/>

            </div>

            <div class="form-group">

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

                <div class="input-group date form_date col-md-5" >

                    <input class="form-control" size="16" type="text" value="" readonly>

                    <span class="input-group-addon"><span class="glyphiwww.meidiyazx.com/sitemap.xml"></span></span>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>

                </div>

                <input type="hidden" id="dtp_input2" value="" /><br/>

            </div>

            <div class="form-group">

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

                <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">

                    <input class="form-control" size="16" type="text" value="" readonly>

                    <span class="input-group-addon"><span class="glyphiwww.meidiyazx.com/sitemap.xml"></span></span>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>

                </div>

                <input type="hidden" id="dtp_input3" value="" /><br/>

            </div>

            <div class="form-group">

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

                <div class="input-group date form_month col-md-5">

                    <input class="form-control" size="16" type="text" value="" readonly>

                    <span class="input-group-addon"><span class="glyphiwww.meidiyazx.com/sitemap.xml"></span></span>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>

                </div>

                <input type="hidden" id="dtp_input3" value="" /><br/>

            </div>

            <div class="form-group">

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

                <div class="input-group date form_month_date col-md-5">

                    <input class="form-control" size="16" type="text" value="" readonly>

                    <span class="input-group-addon"><span class="glyphiwww.meidiyazx.com/sitemap.xml"></span></span>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>

                </div>

                <input type="hidden" id="dtp_input3" value="" /><br/>

            </div>

            <div class="form-group">

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

                <div class="input-group date form_year col-md-5">

                    <input class="form-control" size="16" type="text" value="" readonly>

                    <span class="input-group-addon"><span class="glyphiwww.meidiyazx.com/sitemap.xml"></span></span>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>

                </div>

                <input type="hidden" id="dtp_input3" value="" /><br/>

            </div>

            <div class="form-group">

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

                <div class="input-group date form_date_start col-md-3">

                    <input class="form-control" size="16" type="text" value="" readonly>

                    <span class="input-group-addon"><span class="glyphiwww.meidiyazx.com/sitemap.xml"></span></span>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>

                </div>

                <input type="hidden" id="dtp_input3" value="" />

            </div>

            <div class="form-group">

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

                <div class="input-group date form_date_end col-md-3">

                    <input class="form-control" size="16" type="text" value="" readonly>

                    <span class="input-group-addon"><span class="glyphiwww.meidiyazx.com/sitemap.xml"></span></span>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>

                </div>

                <input type="hidden" id="dtp_input3" value="" />

            </div>

        </fieldset>

    </form>

</div>