一个写得较好的JavaScript日期挑选控件_时间日期_懂视

一个写得较好的JavaScript日期挑选控件_时间日期

2020-11-27 20:42:11 责编:小采

由于是在网络上无意间找到的一个例程，所以不知道原作者，在此还请原作者见谅！
完整源代码如下：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>直接用的JS日期控件</title> 
</pre>输出改成你想要的格式 
} 
else 
{ 
outObject.value= parent.meizzTheYear + "-" + format( parent.meizzTheMonth) + "-" + 
format(parent.meizzTheDate); //注：在这里你可以</script></pre>输出改成你想要的格式 
} 
} 
closeLayer(); 
} 
function meizzPrevM() //往前翻月份 
{ 
if(meizzTheMonth>1){meizzTheMonth--}else{meizzTheYear--;meizzTheMonth=12;} 
meizzSetDay(meizzTheYear,meizzTheMonth); 
} 
function meizzNextM() //往后翻月份 
{ 
if(meizzTheMonth==12){meizzTheYear++;meizzTheMonth=1}else{meizzTheMonth++} 
meizzSetDay(meizzTheYear,meizzTheMonth); 
} 
// TODO: 整理代码 
function meizzSetDay(yy,mm) //主要的写程序********** 
{ 
meizzWriteHead(yy,mm); 
//设置当前年月的公共变量为传入值 
meizzTheYear=yy; 
meizzTheMonth=mm; 
for (var i = 0; i < 37; i++){meizzWDay[i]=""}; //将显示框的内容全部清空 
var day1 = 1,day2=1,firstday = new Date(yy,mm-1,1).getDay(); //某月第一天的星期几 
for (i=0;i<firstday;i++)meizzWDay[i]=GetMonthCount(mm==1?yy-1:yy,mm==1?12:mm-1)-firstday+i+1 //上个月的最后几天 
for (i = firstday; day1 < GetMonthCount(yy,mm)+1; i++) { meizzWDay[i]=day1;day1++; } 
for (i=firstday+GetMonthCount(yy,mm);i<37;i++) { meizzWDay[i]=day2;day2++; } 
for (i = 0; i < 37; i++) 
{ 
var da = eval("odatelayer.meizzDay"+i) //书写新的一个月的日期星期排列 
if (meizzWDay[i]!="") 
{ 
//初始化边框 
da.borderColorLight="#63A3E9"; 
da.borderColorDark="#63A3E9"; 
da.style.color="#1478eb"; 
if(i<firstday) //上个月的部分 
{ 
da.innerHTML="<b><font color=#BCBABC>" + meizzWDay[i] + "</font></b>"; 
da.title=(mm==1?12:mm-1) +"月" + meizzWDay[i] + "日"; 
da.onclick=Function("meizzDayClick(this.innerText,-1)"); 
if(!outDate) 
da.style.backgroundColor = ((mm==1?yy-1:yy) == new Date().getFullYear() && 
(mm==1?12:mm-1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ? 
"#5CEFA0":"#f5f5f5"; 
else 
{ 
da.style.backgroundColor =((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 && 
meizzWDay[i]==outDate.getDate())? "#84C1FF" : 
(((mm==1?yy-1:yy) == new Date().getFullYear() && (mm==1?12:mm-1) == new Date().getMonth()+1 && 
meizzWDay[i] == new Date().getDate()) ? "#5CEFA0":"#f5f5f5"); 
//将选中的日期显示为凹下去 
if((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 && 
meizzWDay[i]==outDate.getDate()) 
{ 
da.borderColorLight="#FFFFFF"; 
da.borderColorDark="#63A3E9"; 
} 
} 
} 
else if (i>=firstday+GetMonthCount(yy,mm)) //下个月的部分 
{ 
da.innerHTML="<b><font color=#BCBABC>" + meizzWDay[i] + "</font></b>"; 
da.title=(mm==12?1:mm+1) +"月" + meizzWDay[i] + "日"; 
da.onclick=Function("meizzDayClick(this.innerText,1)"); 
if(!outDate) 
da.style.backgroundColor = ((mm==12?yy+1:yy) == new Date().getFullYear() && 
(mm==12?1:mm+1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ? 
"#5CEFA0":"#f5f5f5"; 
else 
{ 
da.style.backgroundColor =((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 && 
meizzWDay[i]==outDate.getDate())? "#84C1FF" : 
(((mm==12?yy+1:yy) == new Date().getFullYear() && (mm==12?1:mm+1) == new Date().getMonth()+1 && 
meizzWDay[i] == new Date().getDate()) ? "#5CEFA0":"#f5f5f5"); 
//将选中的日期显示为凹下去 
if((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 && 
meizzWDay[i]==outDate.getDate()) 
{ 
da.borderColorLight="#FFFFFF"; 
da.borderColorDark="#63A3E9"; 
} 
} 
} 
else //本月的部分 
{ 
da.innerHTML="<b>" + meizzWDay[i] + "</b>"; 
da.title=mm +"月" + meizzWDay[i] + "日"; 
da.onclick=Function("meizzDayClick(this.innerText,0)"); //给td赋予onclick事件的处理 
//如果是当前选择的日期，则显示亮蓝色的背景；如果是当前日期，则显示暗黄色背景 
if(!outDate) 
da.style.backgroundColor = (yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())? 
"#5CEFA0":"#f5f5f5"; 
else 
{ 
da.style.backgroundColor =(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate())? 
"#84C1FF":((yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())? 
"#5CEFA0":"#f5f5f5"); 
//将选中的日期显示为凹下去 
if(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate()) 
{ 
da.borderColorLight="#FFFFFF"; 
da.borderColorDark="#63A3E9"; 
} 
} 
} 
da.style.cursor="hand" 
} 
else { da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"; } 
} 
} 
function meizzDayClick(n,ex) //点击显示框选取日期，主输入函数************* 
{ 
parent.meizzTheDate=n; 
var yy=meizzTheYear; 
var mm = parseInt(meizzTheMonth)+ex; //ex表示偏移量，用于选择上个月份和下个月份的日期 
var hh=meizzTheHour; 
var mi=meizzTheMinute; 
var se=meizzTheSecond; 
//判断月份，并进行对应的处理 
if(mm<1){ 
yy--; 
mm=12+mm; 
} 
else if(mm>12){ 
yy++; 
mm=mm-12; 
} 
if (mm < 10) {mm = "0" + mm;} 
if (hh<10) {hh="0" + hh;} //时 
if (mi<10) {mi="0" + mi;} //分 
if (se<10) {se="0" + se;} //秒 
if (outObject) 
{ 
if (!n) { //outObject.value=""; 
return;} 
if ( n < 10){n = "0" + n;} 
WriteDateTo(yy,mm,n,hh,mi,se); 
closeLayer(); 
if (bUseTime) 
{ 
try 
{ 
outButton.click(); 
} 
catch (e) 
{ 
setday(outObject); 
} 
} 
} 
else {closeLayer(); alert("您所要輸出的控件對象并不存在！");} 
} 
function format(n) //格式化数字为两位字符表示 
{ 
var m=new String(); 
var tmp=new String(n); 
if (n<10 && tmp.length<2) 
{ 
m="0"+n; 
} 
else 
{ 
m=n; 
} 
return m; 
} 
function evaSetTime() //设置用户选择的小时、分钟 
{ 
odatelayer.meizzHourHead.innerText=meizzTheHour+" 时"; 
odatelayer.meizzMinuteHead.innerText=meizzTheMinute+" 分"; 
odatelayer.meizzSecondHead.innerText=meizzTheSecond+" 秒"; 
WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond) 
} 
function evaSetTimeNothing() //设置时间控件为空 
{ 
odatelayer.meizzHourHead.innerText=""; 
odatelayer.meizzMinuteHead.innerText=""; 
odatelayer.meizzSecondHead.innerText=""; 
WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond) 
} 
function evaSetTimeNow() //设置时间控件为当前时间 
{ 
odatelayer.meizzHourHead.innerText=new Date().getHours()+" 时"; 
odatelayer.meizzMinuteHead.innerText=new Date().getMinutes()+" 分"; 
odatelayer.meizzSecondHead.innerText=new Date().getSeconds()+" 秒"; 
meizzTheHour = new Date().getHours(); 
meizzTheMinute = new Date().getMinutes(); 
meizzTheSecond = new Date().getSeconds(); 
WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond) 
} 
function UseTime(ctl) 
{ 
bUseTime=!bUseTime; 
if (bUseTime) 
{ 
bImgSwitch(); 
ctl.innerHTML=bImg; 
evaSetTime(); //显示时间，用户原来选择的时间 
//evaSetTimeNow(); //显示当前时间 
} 
else 
{ 
bImgSwitch(); 
ctl.innerHTML=bImg; 
evaSetTimeNothing(); 
} 
} 
function WriteDateTo(yy,mm,n,hh,mi,se) 
{ 
if (bUseTime) 
{ 
outObject.value= yy + "-" + format(mm) + "-" + format(n) + " " + format(hh) + ":" + format(mi) + ":" + format(se); //注：在这里你可以</script></pre>输出改成你想要的格式 
} 
else 
{ 
outObject.value= yy + "-" + format(mm) + "-" + format(n); //注：在这里你可以</script></pre>输出改成你想要的格式 
} 
} 
function bImgSwitch() 
{ 
if (bUseTime) 
{ 
bImg="開啟"; 
} 
else 
{ 
bImg="關閉"; 
} 
} 
// --></ script> 
</head> 
<body> 
测试一，onfocus事件调用：<input type="text" name="txtDate1" readonly="readonly" onfocus="setday(this);" />测试二，onclick事件调用：<input type="text" name="txtDate2" readonly="readonly" /><input type="button" value="setday" onclick="setday(this,document.all.txtDate2);" /> 
<div style="display:none;"><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?de973f4fc4fc27c651135a4cd7781c2b";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div></body> 
</html>

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

下载本文

显示全文

全部频道