Home >Web Front-end >JS Tutorial >js calendar control (accurate to minutes)_time and date

js calendar control (accurate to minutes)_time and date

WBOYOriginal: 2016-05-16 19:00:471169browse

<style> 
.menu_iframe{position:absolute; visibility:inherit; top:0px; left:0px; width:170px; z-index:-1; filter: Alpha(Opacity=0);} 
.cal_table{ border:#333333 solid 1px; border-collapse:collapse; background:#ffffff; font-size:12px} 
.cal_table td{ border:1px #ffffff solid; } 
.cal_drawdate{ background:#E3EBF6;border-collapse:collapse; width:100%} 
.cal_drawdate td{ border:1px #ffffff solid; } 
.cal_drawtime{ border:0px #ffffff solid; font-size:12px} 
.cal_drawdate td{ border:0px #ffffff solid; } 
.m_fieldset { 
    padding: 0,10,5,10; 
    text-align: center; 
    width: 150px; 
} 
.m_legend { 
    font-family: Tahoma; 
    font-size: 11px; 
    padding-bottom: 5px; 
} 
.m_frameborder { 
    border-left: 1px inset #D4D0C8; 
    border-top: 1px inset #D4D0C8; 
    border-right: 1px inset #D4D0C8; 
    border-bottom: 1px inset #D4D0C8; 
    width: 35px; 
    height: 19px; 
    background-color: #FFFFFF; 
    overflow: hidden; 
    text-align: right; 
    font-family: "Tahoma"; 
    font-size: 10px; 
} 
.m_arrow { 
    width: 16px; 
    height: 8px; 
    background:#cccccc; 
    font-family: "Webdings"; 
    font-size: 7px; 
    line-height: 2px; 
    padding-left: 2px; 
    cursor: default; 
} 
.m_input { 
    width: 12px; 
    height: 14px; 
    border: 0px solid black; 
    font-family: "Tahoma"; 
    font-size: 9px; 
    text-align: right; 
} 
.c_fieldset { 
    padding: 0,10,5,10; 
    text-align: center; 
    width: 180px; 
} 
.c_legend { 
    font-family: Tahoma; 
    font-size: 11px; 
    padding-bottom: 5px; 
} 
.c_frameborder { 
    border-left: 1px #D4D0C8; 
    border-top: 1px #D4D0C8; 
    border-right: 1px #FFFFFF; 
    border-bottom: 1px #FFFFFF; 
    background-color: #FFFFFF; 
    overflow: hidden; 
    font-family: "Tahoma"; 
    font-size: 10px; 
    width:100%; 
    height:120px; 
} 
.c_frameborder td { 
    width: 23px; 
    height: 16px; 
    font-family: "Tahoma"; 
    font-size: 11px; 
    text-align: center; 
    cursor: default; 
} 
.c_frameborder .selected { 
    background-color:#0A246A; 
    width:12px; 
    height:12px; 
    color:white; 
    display:block; 
} 
.c_frameborder span { 
    width:12px; 
    height:12px; 
} 
.c_arrow { 
    width: 16px; 
    height: 8px; 
    background:#cccccc; 
    font-family: "Webdings"; 
    font-size: 7px; 
    line-height: 2px; 
    padding-left: 2px; 
    cursor: default; 
} 
.c_year { 
    font-family: "Tahoma"; 
    font-size: 11px; 
    cursor: default; 
    width:55px; 
    height:20px; 
    border:#99B2D3 solid 1px; 
} 
.c_month { 
    width:75px; 
    height:20px; 
    font:11px "Tahoma"; 
    border:#99B2D3 solid 1px; 
} 
.c_dateHead { 
    background-color:#99B2D3; 
    color:#ffffff; 
    border-collapse:collapse; 
} 
.c_dateHead td{ border:0px #ffffff solid; } 
.rightmenu{ 
    float:left; /* 菜单总体水平位置 */ 
    list-style:none; 
    line-height:19px; /* 一级菜单高 */ 
    background:#1371A0 ; /* 所有菜单移出色 */ 
    font-weight: bold; 
    padding:0px; 
    margin:0px; 
border: 1px #000000 solid; 
} 
.rightmenu li{ 
    float:left; /* 菜单总体水平位置 */ 
    list-style:none; 
    line-height:19px; /* 一级菜单高 */ 
    background:#1371A0 ; /* 所有菜单移出色 */ 
    font-weight: bold; 
color:#FFFFFF; 
padding:0px; 
    margin:0px; 
border: 1px #FFFFFF solid; 
} 
.rightmenu li a{ 
    float:left; /* 菜单总体水平位置 */ 
    list-style:none; 
    line-height:19px; /* 一级菜单高 */ 
    background:#1371A0 ; /* 所有菜单移出色 */ 
    font-weight: bold; 
color:#FFFFFF !important; 
padding:0px; 
    margin:0px; 
    border-right: 0px; 
display:block; 
width:80px; 
} 
.rightmenu li a:hover{ 
    float:left; /* 菜单总体水平位置 */ 
    list-style:none; 
    line-height:19px; /* 一级菜单高 */ 
    background:#B2CFDF ; /* 所有菜单移出色 */ 
    font-weight: bold; 
color:#000000 !important; 
padding:0px; 
    margin:0px; 
    border-right: 0px; 
width:80px; 
text-decoration:none; 
} 
</style>
<input class="input" type="text" name="bgntime" style="width:120" value="" id="bgntime" onclick="showCal(bgntime);">
Click to pop up the time box: <div id="dateTime" onclick="event.cancelBubble=true" style="position:absolute;visibility:hidden;width:100px;height:100px;left=0px;top=0px;z-index:100;)">
<table class="cal_table" border="0">
<tr>
<td> 
<script> 
function CalendarMinute(name,fName) 
{ 
    this.name = name; 
    this.fName = fName || "m_input"; 
    this.timer = null; 
    this.fObj = null; 
     
    this.toString = function() 
    { 
        var objDate = new Date();         
        var sMinute_Common = "class=\"m_input\" maxlength=\"2\" name=\""+this.fName+"\" onfocus=\""+this.name+".setFocusObj(this)\" onblur=\""+this.name+".setTime(this)\" onkeyup=\""+this.name+".prevent(this)\" onkeypress=\"if (!/[0-9]/.test(String.fromCharCode(event.keyCode)))event.keyCode=0\" onpaste=\"return false\" ondragenter=\"return false\""; 
        var sButton_Common = "class=\"m_arrow\" onfocus=\"this.blur()\" onmouseup=\""+this.name+".controlTime()\" disabled" 
        var str = ""; 
        str += "<table class=\"cal_drawtime\" cellspacing=\"0\" cellpadding=\"0\">" 
        str += "<tr>" 
        str += "<td>" 
        str += "请选择时间：" 
        str += "</script>
</td>" 
        str += "<td>" 
        str += "<div class='\"m_frameborder\"'>" 
        str += "<input radix='\"24\"' value='\""+this.formatTime(objDate.getHours())+"\"'>:" 
        str += "<input radix='\"60\"' value='\""+this.formatTime(objDate.getMinutes())+"\"'>" 
        //str += "<input radix='\"60\"' value='\""+this.formatTime(objDate.getSeconds())+"\"'>" 
        str += "</div>" 
        str += "</td>" 
        str += "<td>" 
        str += "<table class='\"cal_drawtime\"' border='\"0\"' cellspacing='\"0\"' cellpadding='\"0\"'>" 
        str += "<tr><td><button id='\""+this.fName+"_up\"'>5</button></td></tr>"         
        str += "<tr><td><button id='\""+this.fName+"_down\"'>6</button></td></tr>" 
        str += "</table>" 
        str += "</td>" 
        str += "</tr>" 
        str += "</table>" 
        return str; 
    } 
    this.play = function() 
    { 
        this.timer = setInterval(this.name+".playback()",1000); 
    } 
    this.formatTime = function(sTime) 
    { 
        sTime = ("0"+sTime); 
        return sTime.substr(sTime.length-2); 
    } 
    this.playback = function() 
    { 
        var objDate = new Date(); 
        var arrDate = [objDate.getHours(),objDate.getMinutes(),objDate.getSeconds()]; 
        var objMinute = document.getElementsByName(this.fName); 
        for (var i=0;i<objminute.length objminute this.formattime this.prevent="function(obj)" clearinterval this.setfocusobj var value="parseInt(obj.value,10);" radix="parseInt(obj.radix,10)-1;" if>radix||obj.value"; 
        str += "<tr>"; 
        str += "<td>"; 
        str += this.drawMonth(); 
        str += "</td>"; 
        str += "<td align='\"right\"'>"; 
        str += this.drawYear(); 
        str += "</td>"; 
        str += "</tr>"; 
        str += "<tr>"; 
        str += "<td colspan='\"2\"'>"; 
        str += "<div class='\"c_frameborder\"'>"; 
        str += "<table width='\"100%\"' border='\"0\"' cellspacing='\"0\"' cellpadding='\"0\"' class='\"c_dateHead\"'>"; 
        str += "<tr>"; 
        str += "<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>"; 
        str += "</tr>"; 
        str += "</table>"; 
        str += this.drawDate(); 
        str += "</div>"; 
        str += "</td>"; 
        str += "</tr>"; 
        str += ""; 
        return str; 
    } 
    //private 
    this.drawYear = function() 
    { 
        var str = ""; 
        str += "<table border='\"0\"' cellspacing='\"0\"' cellpadding='\"0\"'>"; 
        str += "<tr>"; 
        str += "<td>"; 
        str += "<input class='\"c_year\"' maxlength='\"4\"' value='\""+this.year+"\"' name='\""+this.fName+"\"' id='\""+this.fName+"_year\"' readonly>"; 
        //DateField 
        str += "<input type='\"hidden\"' name='\""+this.fName+"\"' value='\""+this.date+"\"' id='\""+this.fName+"_date\"'>"; 
        str += "</td>"; 
        str += "<td>"; 
        str += "<table cellspacing='\"2\"' cellpadding='\"0\"' border='\"0\"'>"; 
        str += "<tr>"; 
        str += "<td><button class='\"c_arrow\"' onfocus='\"this.blur()\"' onclick="\"event.cancelBubble=true;document.getElementById('"+this.fName+"_year').value++;"+this.name+".redrawDate()\"">5</button></td>"; 
        str += "</tr>"; 
        str += "<tr>"; 
        str += "<td><button class='\"c_arrow\"' onfocus='\"this.blur()\"' onclick="\"event.cancelBubble=true;document.getElementById('"+this.fName+"_year').value--;"+this.name+".redrawDate()\"">6</button></td>"; 
        str += "</tr>"; 
        str += "</table>"; 
        str += "</td>"; 
        str += "</tr>"; 
        str += "</table>"; 
        return str; 
    } 
    //priavate 
    this.drawMonth = function() 
    { //alert(this.fName); 
        var aMonthName = ["一","二","三","四","五","六","七","八","九","十","十一","十二"]; 
        var str = ""; 
        str += "<select class='\"c_month\"' name='\""+this.fName+"\"' id='\""+this.fName+"_month\"' onchange='\""+this.name+".redrawDate()\"'>"; 
        for (var i=0;i<amonthname.length str value='\""+(i+1)+"\"'>"+aMonthName[i]+"月"; 
        } 
        str += "</amonthname.length></select>"; 
        return str; 
    } 
    //private 
    this.drawDate = function() 
    { 
        var str = ""; 
        var fDay = new Date(this.year,this.month,1).getDay(); 
        var fDate = 1-fDay; 
        var lDay = new Date(this.year,this.month+1,0).getDay(); 
        var lDate = new Date(this.year,this.month+1,0).getDate(); 
        str += "<table class='\"cal_drawdate\"' border='\"0\"' cellspacing='\"0\"' cellpadding='\"0\"' id='\""+this.fName+"_dateTable"+"\"'>"; 
        for (var i=1,j=fDate;i"; 
            for (var k=0;k<span class='\"selected\"":"")+"' onclick='\""+this.name+".redrawDate(this.innerText)\"'>"+(isDate(j++))+"</span>"; 
            } 
            str += ""; 
        } 
        str += "</table>"; 
        return str; 
        function isDate(n) 
        { 
            return (n>=1&&nnew Date(this.year,this.month+1,0).getDate()) this.date = new Date(this.year,this.month+1,0).getDate(); 
        document.getElementById(this.fName+"_dateTable").outerHTML = this.drawDate(); 
        //alert(this.year); 
        //alert(this.month); 
        //alert(this.date); 
        getDateTime(); 
    } 
    //public 
    this.getDate = function(delimiter) 
    { 
var s_month,s_date; 
s_month=this.month+1; 
s_date=this.date; 
s_month = ("0"+s_month); 
s_month=s_month.substr(s_month.length-2); 
s_date = ("0"+s_date); 
s_date=s_date.substr(s_date.length-2); 
if (!delimiter) delimiter = "-"; 
        var aValue = [this.year,s_month,s_date]; 
        return aValue.join(delimiter); 
    } 
} 
function getDateTime(){ 
    //alert(c.getDate()+' '+m.getTime());     
    gdCtrl.value = c.getDate()+' '+m.getTime(); 
} 
var gdCtrl = new Object(); 
function showCal(popCtrl){     
    gdCtrl = popCtrl; 
    event.cancelBubble=true; 
    //alert(popCtrl); 
    var point = fGetXY(popCtrl); 
    //alert(point.x); 
    //var point = new Point(100,100); 
//alert(gdCtrl.value); 
var gdValue=gdCtrl.value; 
var i_year,i_month,i_day,i_hour,i_minute; 
if(gdCtrl.value!="" && validateDate1(gdCtrl.value,'yyyy-MM-dd HH:mm')){ 
i_year=gdValue.substr(0,4); 
if(gdValue.substr(5,1)=="0"){ 
i_month=parseInt(gdValue.substr(6,1)); 
}else{ 
i_month=parseInt(gdValue.substr(5,2)); 
} 
if(gdValue.substr(8,1)=="0"){ 
i_day=parseInt(gdValue.substr(9,1)); 
}else{ 
i_day=parseInt(gdValue.substr(8,2)); 
} 
i_hour1=gdValue.substr(11,2); 
i_minute=gdValue.substr(14,2); 
//alert(i_hour1+"aaa"); 
//alert(i_minute); 
document.getElementById(c.fName+"_year").value = i_year; 
document.getElementById(c.fName+"_month").value= i_month; 
        //document.getElementById(c.fName+"_date").value = i_day; 
c.date=i_day; 
document.getElementsByName(m.fName)[0].value=i_hour1; 
document.getElementsByName(m.fName)[1].value=i_minute; 
c.redrawDate(); 
} 
//c.month= 
with (dateTime.style) { 
        left = point.x; 
        top = point.y+popCtrl.offsetHeight+1; 
        width = dateTime.offsetWidth; 
        height = dateTime.offsetHeight; 
        //fToggleTags(point); 
        visibility = 'visible'; 
    } 
     
    dateTime.focus(); 
} 
function Point(iX, iY){ 
    this.x = iX; 
    this.y = iY; 
} 
function validateDate1(date,format){ 
var time=date; 
if(time=="") return; 
var reg=format; 
var reg=reg.replace(/yyyy/,"[0-9]{4}"); 
var reg=reg.replace(/yy/,"[0-9]{2}"); 
var reg=reg.replace(/MM/,"((0[1-9])|1[0-2])"); 
var reg=reg.replace(/M/,"(([1-9])|1[0-2])"); 
var reg=reg.replace(/dd/,"((0[1-9])|([1-2][0-9])|30|31)"); 
var reg=reg.replace(/d/,"([1-9]|[1-2][0-9]|30|31))"); 
var reg=reg.replace(/HH/,"(([0-1][0-9])|20|21|22|23)"); 
var reg=reg.replace(/H/,"([0-9]|1[0-9]|20|21|22|23)"); 
var reg=reg.replace(/mm/,"([0-5][0-9])"); 
var reg=reg.replace(/m/,"([0-9]|([1-5][0-9]))"); 
var reg=reg.replace(/ss/,"([0-5][0-9])"); 
var reg=reg.replace(/s/,"([0-9]|([1-5][0-9]))"); 
reg=new RegExp("^"+reg+"$"); 
if(reg.test(time)==false){//验证格式是否合法 
//alert(alt); 
//date.focus(); 
return false; 
} 
return true; 
} 
function fGetXY(aTag){     
    var oTmp=aTag; 
    var pt = new Point(0,0); 
    do {         
        pt.x += oTmp.offsetLeft; 
        pt.y += oTmp.offsetTop; 
        oTmp = oTmp.offsetParent; 
    } while(oTmp.tagName!="BODY"); 
     
    return pt; 
} 
function hideCalendar(){ 
dateTime.style.visibility = "hidden"; 
/*for (i in goSelectTag) //????????,goSelectTag???? 
    goSelectTag[i].style.visibility = "visible"; 
goSelectTag.length = 0;*/ 
} 
 
<tr><td valign="top" align="center"> 
<script>    var c = new CalendarCalendar('c');document.write(c);</script> 
</td></tr>
<script>    var m = new CalendarMinute('m');document.write(m);</script><iframe src="javascript:false" style="height:200px;" class="menu_iframe"></iframe></objminute.length>
</div> 
<script event="onclick()" for="document">hideCalendar()</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js code that disappears when clicked outside the scene layer_javascript skillsNext article：js code that disappears when clicked outside the scene layer_javascript skills

Related articles

See more