Js弹出式日历和时间选择

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出式日历和时间选择</title>
</head>
<body>
<div style="width:300px;margin:50px auto;">选择日期和时间：<input type="text" readonly="readonly"  style="text-align:center;width:80px;" onclick="showCalendar(this)"  />
<input type="text" readonly="readonly"  style="text-align:center;width:40px;" onclick="showTimer(this);"  />
</div>
</body>
</html>
<script language="javascript">
document.write('<iframe id="cPan" style="padding:0px;position:absolute;z-index:99;width:158px;display:none;height:0px;" frameborder="0" scrolling="no"></iframe>');      
var panObj;	//弹出层
var tagObj;	//触发对象
var _IsMousedown = 0;
var _ClickLeft = 0;
//var _ClickTop = 0;
var displayTime='';
function showCalendar(obj){
	panObj=document.getElementById('cPan');
	tagObj=obj;
	Calendar_get_now();
}
function showTimer(obj){
	panObj=document.getElementById('cPan');
	tagObj=obj;
	Timer_get_now();	
}
function Calendar_get_now(){//得到当前的年月
	//得到年月
	var get_Date=new Date();
	var postValue=tagObj.value;
	if(postValue.length<=0){//初始值是否为空
		//为空时取当前年月
		postYear=get_Date.getFullYear();
		postMonth=get_Date.getMonth()+1;
	}else{
		//不为空判断值的格式
		var re=/\d{4}-\d{1,2}/;
		var arr=re.exec(postValue);
		if(arr!=null){
			//格式匹配时
			var Sdate=postValue.split("-");
			postYear=parseInt(Sdate[0]);
			postMonth=parseInt(Sdate[1]);
		}else{
			//格式不匹配时取当前年月
			postYear=get_Date.getFullYear();
			postMonth=get_Date.getMonth()+1;
		}
	}
	Calendar_draw(postYear,postMonth);
}
function Timer_get_now(){
	var getNowTime=new Date();
	var nowHour=0,nowMinute=0;
	var disValue=tagObj.value;
	if(disValue.length<=0){//初始值是否为空
		nowHour=getNowTime.getHours(); 
		nowMinute=getNowTime.getMinutes(); 
	}else{
		var get_disValue=disValue.split(":");
		nowHour=parseInt(get_disValue[0]);
		nowMinute=parseInt(get_disValue[1]);
	}
	Timer_draw(nowHour,nowMinute);
}
function Calendar_draw(get_year,get_month){		//画出日历
	var MonthDNum=new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);
	var DayNum=(IsLeapYear(get_year)&&get_month==2)?MonthDNum[get_month]+1:MonthDNum[get_month];//一个月总共多少天
	var newdate=new Date(get_year,get_month-1,1)//当月的第一天
	var crow=Math.ceil((DayNum+newdate.getDay())/7);//进一法取整(总天数+1号是第几天)/7 = 共可以生成多少行
	//HTML代码
	var Hstr='';
	Hstr+='<%@ page contentType="text/html; charset=gb2312" language="java"%>';
	Hstr+='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
	Hstr+='<meta http-equiv="Content-Type" content="text/html; charset=gb2312">';
	Hstr+='<style type="text/css"></style>';
	Hstr+='<div id="panTab" style="border:1px solid #009999;width:156px;position:absolute;z-index:10;top:0px;left:0px;">';     //BBB  --边框颜色
	Hstr+='<table border="0">';
	Hstr+='<tr><td colspan="7" height="25" valign="middle" style="text-align:left;">';
	//生成日历标题
	Hstr+='<img src="//ku.shouce.ren/files/images/201601/56a32303692a7.gif.thumb.jpg" align="absmiddle" alt="上一年" onClick="javascript:parent.preyear();" style="CURSOR:HAND;margin-left:5px;"><img src="//ku.shouce.ren/files/images/201601/56a3230485d0c.gif.thumb.jpg" align="absmiddle" alt="上一月" onClick="javascript:parent.premonth();" style="CURSOR:HAND;margin-left:5px;">';
	Hstr+='<span style="CURSOR:default;padding:0px 5px;">'+get_year+' 年 '+get_month+' 月</span>';
	Hstr+='<img src="//ku.shouce.ren/files/images/201601/56a3230589756.gif.thumb.jpg" align="absmiddle" alt="下一月" onClick="javascript:parent.nextmonth();" style="CURSOR:HAND;"><img src="//ku.shouce.ren/files/images/201601/56a32306a9cf7.gif.thumb.jpg" align="absmiddle" alt="下一年" onClick="javascript:parent.nextyear();" style="CURSOR:HAND;margin-left:5px;">';
	Hstr+='<img src="//ku.shouce.ren/files/images/201601/56a32309546e9.gif.thumb.jpg" align="absmiddle" alt="关闭" onClick="javascript:parent.closep();" style="position:absolute;CURSOR:HAND;right:5px;top:7px;">';
	Hstr+='</td></tr><tr bgcolor="#006666" style="cursor:default;">';			//006666  -- 标题背景色
	//生成星期标题
	var day = new Array('日','一','二','三','四','五','六');
	for(i=0;i<7;i++){
	(i==0||i==6)?Hstr += '<td title="星期'+day[i]+'" align="center" valign="middle" height="20"><span style="color: #FF6600">' + day[i] + '</span></td>':Hstr += '<td title="星期'+day[i]+'" align="center" valign="middle" height="20"><span style="color: #FFFFFF">' + day[i] + '</span></td>';}
	Hstr += '</tr>';
	//生成日历内容
	var nowc=1;
	var nowday=1;
	var nowd=new Date();
	var today_year=nowd.getFullYear();	//今年
	var today_month=nowd.getMonth()+1;	//今月
	var today_day=nowd.getDate();	//今日
	for(m=1;m<=crow;m++){//需要生成crow行
	Hstr +='<tr height="20">';
		for(n=1;n<=7;n++){//需要生成7列
			if(nowc>=newdate.getDay()+1 && nowc<=DayNum+newdate.getDay()){//当前写的内容是否要该月范围内
				if (get_year==today_year && get_month==today_month && nowday==today_day){
					Hstr+='<td width="20" title="'+ get_year+'-'+get_month+'-'+nowday  +'" style="CURSOR:HAND;border:1px solid #BBB;" onClick="javascript:parent.saveD('+get_year+','+get_month+','+nowday+');" bgcolor="#FF9900"><span style="color: #FF0000">'+nowday+'</span></td>'
				}else{
					if (nowday==today_day){
						//今天
						Hstr+='<td width="20" title="'+ get_year+'-'+get_month+'-'+nowday  +'" style="CURSOR:HAND;border:1px solid #BBB;" onClick="javascript:parent.saveD('+get_year+','+get_month+','+nowday+');" bgcolor="#E4E4E4"><span style="color: #FF0000">'+nowday+'</span></td>'
					}else{
						if(n==1||n==7){
							if(n==1){
								Hstr+='<td width="20" title="'+ get_year+'-'+get_month+'-'+nowday  +'" style="CURSOR:HAND;border-top:1px solid #BBB;border-right:1px solid #BBB;border-bottom:1px solid #BBB;" onClick="javascript:parent.saveD('+get_year+','+get_month+','+nowday+');" bgcolor="#F2F2F2"><span style="color: #FF6600">'+nowday+'</span></td>'
							}else{
								Hstr+='<td width="20" title="'+ get_year+'-'+get_month+'-'+nowday  +'" style="CURSOR:HAND;border-top:1px solid #BBB;border-left:1px solid #BBB;border-bottom:1px solid #BBB;" onClick="javascript:parent.saveD('+get_year+','+get_month+','+nowday+');" bgcolor="#F2F2F2"><span style="color: #FF6600">'+nowday+'</span></td>'
							}
						}else{
							Hstr+='<td width="20" title="'+ get_year+'-'+get_month+'-'+nowday+'" style="CURSOR:HAND;border:1px solid #BBB;" onClick="javascript:parent.saveD('+get_year+','+get_month+','+nowday+');" bgcolor="#F2F2F2">'+nowday+'</td>'
						}
					}
				}
				nowday+=1;
			}else{
				Hstr+='<td width="20" style="CURSOR:default;"></td>'
			}
			nowc+=1;
		}
	Hstr += '</tr>';
	}
	Hstr+='<tr><td colspan="7" height="15" style="border-top:1px solid #BBB;"><div style="margin-top:3px;CURSOR:HAND;" title="回到今天" onClick="javascript:parent.return_now();">Today：' + today_year+'-'+today_month+'-'+today_day + '</div></td></tr>';
	Hstr+='</table></div>';
	/////////////////////////////panTab
	theight=45+20*(crow+1)+5;
	document.getElementById('cPan').style.height = theight+"px";
	cPan.document.open();//打开iframe
	cPan.document.write(Hstr);//向iframe内写内容
	cPan.document.close();//关闭iframe
	showPanel();//显示日历
}
function Timer_draw(drwHour,drwMinute){
	//HTML代码
	var posHour=(drwHour/23)*84
	posHour=posHour.toFixed(2);
	var posMinute=(drwMinute/59)*84
	posMinute=posMinute.toFixed(2);
	var Hstr='';
	Hstr+='<%@ page contentType="text/html; charset=gb2312" language="java"%>';
	Hstr+='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
	Hstr+='<meta http-equiv="Content-Type" content="text/html; charset=gb2312">';
	Hstr+='<div style="border:1px solid #009999;width:180px;position:absolute;z-index:10;top:0px;left:0px;"><table style="width:100%; font-size:12px;margin:8px 3px;">';
	Hstr+='<tr><td width="60" style="padding:3px 0px;"><span style="margin-left:5px;">Time</span></td>';
	Hstr+='<td><div style="font-size:13px; font-weight:bold; color:#00F;" id="disTime">' + drwHour + ':' + drwMinute + '</div></td></tr>';
	Hstr+='<tr><td style="padding:3px 0px 8px 0px;"><span style="margin-left:5px;">Hour</span></td>';
	Hstr+='<td><div style="border:1px solid #BBB;width:100px;height:7px;margin-right:5px;position:relative;">';
	Hstr+='<div style="border:1px solid #BBB;background:#FFF;width:15px;height:15px;position:absolute;top:-6px;left:' + posHour + 'px;CURSOR:HAND;" id="HourH" onMouseDown="javascript:parent.moveInit(\'HourH\',event);" onMouseMove="javascript:parent.hourMove(\'HourH\',event)" onMouseUp="javascript:parent.stopMove()" onMouseOut="javascript:parent.stopMove()"></div>';
	Hstr+='</div></td></tr><tr><td style="padding:3px 0px;"><span style="margin-left:5px;">Minute</span></td>';
	Hstr+='<td><div style="border:1px solid #BBB;width:100px;height:7px;margin-right:5px;position:relative;">';
	Hstr+='<div style="border:1px solid #BBB;background:#FFF;width:15px;height:15px;position:absolute;top:-6px;left:' + posMinute + 'px;CURSOR:HAND;" id="MinuteH" onMouseDown="javascript:parent.moveInit(\'MinuteH\',event);" onMouseMove="javascript:parent.minuteMove(\'MinuteH\',event)" onMouseUp="javascript:parent.stopMove()" onMouseOut="javascript:parent.stopMove()"></div>';
	Hstr+='</div></td></tr><tr><td colspan="2"><div style="position:relative;height:25px;border-top:1px solid #BBB;margin:0px 2px;">';
	Hstr+='<div style="position:absolute;left:2px;top:7px;border:1px solid #BBB;padding:3px 8px;CURSOR:HAND;" onclick="javascript:parent.moveNow();">Now</div>';
	Hstr+='<div style="position:absolute;right:2px;top:7px;border:1px solid #BBB;padding:3px 8px;CURSOR:HAND;" onclick="javascript:parent.setNewTime();">Done</div></div></td></tr></table></div>';
	document.getElementById('cPan').style.height = 123+"px";
	document.getElementById('cPan').style.width = 187+"px";
	cPan.document.open();//打开iframe
	cPan.document.write(Hstr);//向iframe内写内容
	cPan.document.close();//关闭iframe
	showPanel();
}
function IsLeapYear(y)//判断是否为闰年
{
	if(0==y%4&&((y%100!=0)||(y%400==0))){return true;}else{return false;}
}
function preyear(){//上一年
	postYear-=1;
	if(postYear<=1900){postMonth=2100}
	Calendar_draw(postYear,postMonth);
}
function premonth(){//上一个月
	postMonth-=1;
	if(postMonth<=0){postMonth=12}
	Calendar_draw(postYear,postMonth);
}
function nextyear(){//下一年
	postYear+=1;
	if(postYear>=2100){postMonth=1900}
	Calendar_draw(postYear,postMonth);
}
function nextmonth(){//下一个月
	postMonth+=1;
	if(postMonth>=12){postMonth=1}
	Calendar_draw(postYear,postMonth);
}
function return_now(){//回到本月度
	var return_Date=new Date();
	postYear=return_Date.getFullYear();
	postMonth=return_Date.getMonth()+1;
	Calendar_draw(postYear,postMonth);
}
function saveD(y,m,d){
	tagObj.value=y+'-'+m+'-'+d;
	closep();
}
function moveInit(divID,evt){
	_IsMousedown = 1;
	if(getBrowserType() == "NSupport"){
		return;
	}
	var obj = panObj.contentDocument.getElementById(divID);
	displayTime=panObj.contentDocument.getElementById("disTime").innerHTML;
	if(getBrowserType() == "fox"){
		_ClickLeft = evt.pageX - parseInt(obj.style.left);
		//_ClickTop = evt.pageY - parseInt(obj.style.top);
	}else{
		_ClickLeft = evt.x - parseInt(obj.style.left);
		//_ClickTop = evt.y - parseInt(obj.style.top);
	}
}
function Move(divID,evt){
	if(_IsMousedown == 0){
		return;
	}
	var objDiv =  panObj.contentDocument.getElementById(divID);
	if(getBrowserType() == "fox"){
		objDiv.style.left = evt.pageX - _ClickLeft;
		//objDiv.style.top = evt.pageY - _ClickTop;
	}else{
		if(evt.x - _ClickLeft>=-1 && evt.x - _ClickLeft<=84){
		objDiv.style.left = evt.x - _ClickLeft;}
		//objDiv.style.top = evt.y - _ClickTop;
	}
	return parseInt(objDiv.style.left)+1;
}
function hourMove(divID,evt){
	if(_IsMousedown == 0){
		return;
	}
	var hourMovePosition=Move(divID,evt);
	var getHour=parseInt(23*(hourMovePosition/84));
	var timeOther=displayTime.substring(displayTime.indexOf(":"),displayTime.length);
	panObj.contentDocument.getElementById("disTime").innerHTML=getHour + timeOther;
}
function minuteMove(divID,evt){
	if(_IsMousedown == 0){
		return;
	}
	var minuteMovePosition=Move(divID,evt);
	var getMinute=parseInt(59*(minuteMovePosition/84));
	var timeOther=displayTime.substring(0,displayTime.indexOf(":")+1);
	panObj.contentDocument.getElementById("disTime").innerHTML=timeOther + getMinute;
}
function moveNow(){
	var getNowTime=new Date();
	var	nowHour=getNowTime.getHours(); 
	var	nowMinute=getNowTime.getMinutes(); 
	panObj.contentDocument.getElementById("disTime").innerHTML=nowHour +':'+nowMinute;
	var posHour=(nowHour/23)*84
	posHour=posHour.toFixed(2);
	var posMinute=(nowMinute/59)*84
	posMinute=posMinute.toFixed(2);
	panObj.contentDocument.getElementById("HourH").style.left=posHour + 'px';
	panObj.contentDocument.getElementById("MinuteH").style.left=posMinute + 'px';	
}
function setNewTime(){
	tagObj.value=panObj.contentDocument.getElementById("disTime").innerHTML;
	closep();
}
function stopMove(){
	_IsMousedown = 0;
}
function showPanel()		//显示层
{
	var p = getposition(tagObj);
	panObj.style.display = "block";
	panObj.style.left = p['x'] +'px';
	panObj.style.top = (p['y'] + 20)+'px';
}
function getposition(obj) {		//得到对象的绝对实际坐标
	var r = new Array();
	r['x'] = obj.offsetLeft;
	r['y'] = obj.offsetTop;
	while(obj = obj.offsetParent) {
		r['x'] += obj.offsetLeft;
		r['y'] += obj.offsetTop;
	}
	return r;
}
function closep(){
	panObj.style.display = "none";
}
function getBrowserType(){
	var browser=navigator.appName
	var b_version=navigator.appVersion
	var version=parseFloat(b_version)
	if ((browser=="Netscape")){
		return "fox";
	}else if(browser=="Microsoft Internet Explorer"){
		if(version>=4){
			return "ie4+";
		}else{
			return "ie4-";
		}
	}else{
		return "NSupport";
	}
}
</script>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Js弹出式日历和时间选择

分类

日期时间

描述

Js实现弹出式日历和日期时间选择功能，点击文本框即可弹出日历，年份和月分可通过控制按钮向前向后选择，同时右侧还有一个滑块调节时间的功能，使用兼容HTML5的火狐或chrome浏览器效果更好。