精确到分钟的js日历控件,日期选择器代码

摘要：精确到分钟的js日历控件，日期选择器代码，我们知道一般的日历控件是可以选择日期的，但是您有没有见过可以精确到选择分钟的?除了选择年、月、日外...

精确到分钟的js日历控件，日期选择器代码，我们知道一般的日历控件是可以选择日期的，但是您有没有见过可以精确到选择分钟的?除了选择年、月、日外，还可以选择时间，够精确吧，希望大家喜欢哦。JS日历插件，这是比较常用的网页特效哦。

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>精确到分钟的js日历控件</TITLE>

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

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 += "</td>"

str += "<td>"

str += "<div class="m_frameborder">"

str += "<input radix="24" value=""+this.formatTime(objDate.getHours())+"" "+sMinute_Common+">:"

str += "<input radix="60" value=""+this.formatTime(objDate.getMinutes())+"" "+sMinute_Common+">"

//str += "<input radix="60" value=""+this.formatTime(objDate.getSeconds())+"" "+sMinute_Common+">"

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" "+sButton_Common+">5</button></td></tr>"

str += "<tr><td><button id=""+this.fName+"_down" "+sButton_Common+">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;i++)

{

objMinute[i].value = this.formatTime(arrDate[i])

}

this.prevent = function(obj)

{

clearInterval(this.timer);

this.setFocusObj(obj);

var value = parseInt(obj.value,10);

var radix = parseInt(obj.radix,10)-1;

if (obj.value>radix||obj.value<0)

{

obj.value = obj.value.substr(0,1);

}

this.controlTime = function(cmd)

{

event.cancelBubble = true;

if (!this.fObj) return;

clearInterval(this.timer);

var cmd = event.srcElement.innerText=="5"?true:false;

var i = parseInt(this.fObj.value,10);

var radix = parseInt(this.fObj.radix,10)-1;

if (i==radix&&cmd)

{

i = 0;

}

else if (i==0&&!cmd)

{

i = radix;

}

else

{

cmd?i++:i--;

}

this.fObj.value = this.formatTime(i);

this.fObj.select();

getDateTime();

}

this.setTime = function(obj)

{

obj.value = this.formatTime(obj.value);

}

this.setFocusObj = function(obj)

{

eval(this.fName+"_up").disabled = eval(this.fName+"_down").disabled = false;

this.fObj = obj;

}

this.getTime = function()

{

var arrTime = new Array(2);

for (var i=0;i<document.getElementsByName(this.fName).length;i++)

{

arrTime[i] = document.getElementsByName(this.fName)[i].value;

//alert(arrTime[i]);

}

return arrTime.join(":");

}

// Written by cloudchen, 2004/03/16

function CalendarCalendar(name,fName)

{

this.name = name;

this.fName = fName || "calendar";

this.year = new Date().getFullYear();

this.month = new Date().getMonth();

this.date = new Date().getDate();

//alert(this.month);

//private

this.toString = function()

{

var str = "";

str += "<table border="0" cellspacing="0" cellpadding="0" onselectstart="return false">";

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 += "</table>";

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;i++) {

str += "<option value=""+(i+1)+"" "+(i==this.month?"selected":"")+">"+aMonthName[i]+"月</option>";

}

str += "</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<7;i++)

{

str += "<tr>";

for (var k=0;k<7;k++)

{

str += "<td><span"+(j==this.date?" class="selected"":"")+" onclick=""+this.name+".redrawDate(this.innerText)">"+(isDate(j++))+"</span></td>";

}

str += "</tr>";

}

str += "</table>";

return str;

function isDate(n)

{

return (n>=1&&n<=lDate)?n:"";

}

//public

this.redrawDate = function(d)

{

this.year = document.getElementById(this.fName+"_year").value;

this.month = document.getElementById(this.fName+"_month").value-1;

//alert(this.date)

this.date = d || this.date;

//alert(this.date)

document.getElementById(this.fName+"_year").value = this.year;

document.getElementById(this.fName+"_month").selectedIndex = this.month;

document.getElementById(this.fName+"_date").value = this.date;

if (this.date>new 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;*/

}

</script>

</HEAD>

<BODY>

点击弹出时间框：<input class="input" type="text" name="bgntime" style="width:120" value="" id="bgntime" onClick="showCal(bgntime);">

</td></tr><tr><td valign='top' align='center'>

</td></tr></table><iframe src="javascript:false" style="height:200px;" class="menu_iframe"></iframe></div>

<SCRIPT event=onclick() for=document>hideCalendar()</SCRIPT>

</BODY>

</HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='/' target='_blank'>/</a></center>