牛B的js 時間控件(年月日時分秒)

轉自：http://liyanhui.iteye.com/admin/blogs/new

var bMoveable=true;
var strFrame;

window.frames.endDateLayer.document.writeln(strFrame);
window.frames.endDateLayer.document.close(); //解決ie進度條不結束的問題

//==================================================== WEB 頁面顯示部分 ======================================================
var outObject;
var outButton; //點擊的按鈕

var outDate=""; //存放對象的日期
var bUseTime=false; //是否使用時間
var odatelayer=window.frames.endDateLayer.document.all; //存放日曆對象
var odatelayer=window.endDateLayer.document.all;
//odatelayer.bUseTimeLayer.innerText="NO";
bImgSwitch();
odatelayer.bUseTimeLayer.innerHTML=bImg;

function setday(tt,obj) //主調函數
{
if (arguments.length > 2){alert("對不起！傳入本控件的參數太多！");return;}
if (arguments.length == 0){alert("對不起！您沒有傳回本控件任何參數！");return;}
var dads = document.all.endDateLayer.style;
var th = tt;
var ttop = tt.offsetTop; //TT控件的定位點高

var thei = tt.clientHeight; //TT控件本身的高
var tleft = tt.offsetLeft; //TT控件的定位點寬

var ttyp = tt.type; //TT控件的類型

while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
dads.top = (ttyp=="image") ? ttop+thei : ttop+thei+6;
dads.left = tleft;
outObject = (arguments.length == 1) ? th : obj;
outButton = (arguments.length == 1) ? null : th; //設定外部點擊的按鈕

//根據當前輸入框的日期顯示日曆的年月
var reg = /^(\d+)-(\d{1,2})-(\d{1,2})/; //不含時間
var r = outObject.value.match(reg);
if(r!=null){
r[2]=r[2]-1;
var d=new Date(r[1],r[2],r[3]);
if(d.getFullYear()==r[1] && d.getMonth()==r[2] && d.getDate()==r[3])
{
   outDate=d;
   parent.meizzTheYear = r[1];
   parent.meizzTheMonth = r[2];
   parent.meizzTheDate = r[3];
}
else
{
   outDate="";
}
meizzSetDay(r[1],r[2]+1);
}
else
{
outDate="";
meizzSetDay(new Date().getFullYear(), new Date().getMonth() + 1);
}
dads.display = '';

//判斷初始化時是否使用時間,非嚴格驗證
//if (outObject.value.length>10)
//{
bUseTime=true;
bImgSwitch();
odatelayer.bUseTimeLayer.innerHTML=bImg;
meizzWriteHead(meizzTheYear,meizzTheMonth);
//}
//else
//{
// bUseTime=false;
// bImgSwitch();
// odatelayer.bUseTimeLayer.innerHTML=bImg;
// meizzWriteHead(meizzTheYear,meizzTheMonth);
//}

try
{
event.returnValue=false;
}
catch (e)
{
//此處排除錯誤，錯誤原因暫未找到。
}
}

var MonHead = new Array(12); //定義陽曆中每個月的最大天數

MonHead[0] = 31; MonHead[1] = 28; MonHead[2] = 31; MonHead[3] = 30; MonHead[4] = 31; MonHead[5] = 30;
MonHead[6] = 31; MonHead[7] = 31; MonHead[8] = 30; MonHead[9] = 31; MonHead[10] = 30; MonHead[11] = 31;

var meizzTheYear=new Date().getFullYear(); //定義年的變量的初始值

var meizzTheMonth=new Date().getMonth()+1; //定義月的變量的初始值

var meizzTheDate=new Date().getDate(); //定義日的變量的初始值
var meizzTheHour=new Date().getHours(); //定義小時變量的初始值

var meizzTheMinute=new Date().getMinutes();//定義分鐘變量的初始值
var meizzTheSecond=new Date().getSeconds();//定義秒變量的初始值

var meizzWDay=new Array(37); //定義寫日期的數組

document.onclick = (function(){
with(window.event)
{
if (srcElement != outObject && srcElement != outButton)
closeLayer();
}
})

function meizzWriteHead(yy,mm,ss) //往 head 中寫入當前的年與月
{
odatelayer.meizzYearHead.innerText = yy + " 年";
odatelayer.meizzMonthHead.innerText = format(mm) + " 月";
//插入當前小時、分
odatelayer.meizzHourHead.innerText=bUseTime?(meizzTheHour+" 時"):"";
odatelayer.meizzMinuteHead.innerText=bUseTime?(meizzTheMinute+" 分"):"";
odatelayer.meizzSecondHead.innerText=bUseTime?(meizzTheSecond+" 秒"):"";
}

/***** 增加小時、分鐘 ***/
function tmpSelectHourInnerHTML(strHour) //小時的下拉框
{
if (!bUseTime){return;}

if (strHour.match(/\D/)!=null){alert("小時輸入參數不是數字！");return;}
var m = (strHour) ? strHour : new Date().getHours();
var s = "<select name=tmpSelectHour style='font-size: 12px' "
s += "οnblur='document.all.tmpSelectHourLayer.style.display=\"none\"' "
s += "οnchange='document.all.tmpSelectHourLayer.style.display=\"none\";"
s += "parent.meizzTheHour = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute);'>\r\n";
var selectInnerHTML = s;
for (var i = 0; i < 24; i++)
{
if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"</option>\r\n"; }
else { selectInnerHTML += "<option value='"+i+"'>"+i+"</option>\r\n"; }
}
selectInnerHTML += "</select>";
odatelayer.tmpSelectHourLayer.style.display="";
odatelayer.tmpSelectHourLayer.innerHTML = selectInnerHTML;
odatelayer.tmpSelectHour.focus();
}

function tmpSelectMinuteInnerHTML(strMinute) //分鐘的下拉框
{
if (!bUseTime){return;}

if (strMinute.match(/\D/)!=null){alert("分鐘輸入參數不是數字！");return;}
var m = (strMinute) ? strMinute : new Date().getMinutes();
var s = "<select name=tmpSelectMinute style='font-size: 12px' "
s += "οnblur='document.all.tmpSelectMinuteLayer.style.display=\"none\"' "
s += "οnchange='document.all.tmpSelectMinuteLayer.style.display=\"none\";"
s += "parent.meizzTheMinute = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute);'>\r\n";
var selectInnerHTML = s;
for (var i = 0; i < 60; i++)
{
if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"</option>\r\n"; }
else { selectInnerHTML += "<option value='"+i+"'>"+i+"</option>\r\n"; }
}
selectInnerHTML += "</select>";
odatelayer.tmpSelectMinuteLayer.style.display="";
odatelayer.tmpSelectMinuteLayer.innerHTML = selectInnerHTML;
odatelayer.tmpSelectMinute.focus();
}

function tmpSelectSecondInnerHTML(strSecond) //秒的下拉框
{
if (!bUseTime){return;}

if (strSecond.match(/\D/)!=null){alert("分鐘輸入參數不是數字！");return;}
var m = (strSecond) ? strSecond : new Date().getMinutes();
var s = "<select name=tmpSelectSecond style='font-size: 12px' "
s += "οnblur='document.all.tmpSelectSecondLayer.style.display=\"none\"' "
s += "οnchange='document.all.tmpSelectSecondLayer.style.display=\"none\";"
s += "parent.meizzTheSecond = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute,parent.meizzTheSecond);'>\r\n";
var selectInnerHTML = s;
for (var i = 0; i < 60; i++)
{
if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"</option>\r\n"; }
else { selectInnerHTML += "<option value='"+i+"'>"+i+"</option>\r\n"; }
}
selectInnerHTML += "</select>";
odatelayer.tmpSelectSecondLayer.style.display="";
odatelayer.tmpSelectSecondLayer.innerHTML = selectInnerHTML;
odatelayer.tmpSelectSecond.focus();
}

function closeLayer() //這個層的關閉
{
var o = document.getElementById("endDateLayer");
if (o != null)
{
o.style.display="none";
}
}

function showLayer() //這個層的關閉
{
document.all.endDateLayer.style.display="";
}

function IsPinYear(year) //判斷是否閏平年
{
if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;
}

function GetMonthCount(year,month) //閏年二月爲29天
{
var c=MonHead[month-1];if((month==2)&&IsPinYear(year)) c++;return c;
}

function GetDOW(day,month,year) //求某天的星期幾
{
var dt=new Date(year,month-1,day).getDay()/7; return dt;
}

if (meizzTheMonth<10 && meizzTheMonth.length<2) //格式化成兩位數字
{
parent.meizzTheMonth="0"+parent.meizzTheMonth;
}
if (parent.meizzTheDate<10 && parent.meizzTheDate.length<2) //格式化成兩位數字
{
parent.meizzTheDate="0"+parent.meizzTheDate;
}
//meizzSetDay(meizzTheYear,meizzTheMonth);
if(outObject)
{
if (bUseTime)
{
   outObject.value= parent.meizzTheYear + "-" + format( parent.meizzTheMonth) + "-" +
       format(parent.meizzTheDate) + " " + format(parent.meizzTheHour) + ":" +
       format(parent.meizzTheMinute) + ":" + format(parent.meizzTheSecond);
       //注：在這裏你可以輸出改成你想要的格式
}
else
{
   outObject.value= parent.meizzTheYear + "-" + format( parent.meizzTheMonth) + "-" +
       format(parent.meizzTheDate); //注：在這裏你可以輸出改成你想要的格式
}
}
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.οnclick=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.οnclick=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.οnclick=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 WriteDateTo(yy,mm,n,hh,mi,se)
{
if (bUseTime)
{
outObject.value= yy + "-" + format(mm) + "-" + format(n) + " " + format(hh) + ":" + format(mi) + ":" + format(se); //注：在這裏你可以輸出改成你想要的格式
}
else
{
outObject.value= yy + "-" + format(mm) + "-" + format(n); //注：在這裏你可以輸出改成你想要的格式
}
}

function bImgSwitch()
{
if (bUseTime)
{
bImg="開啓";
}
else
{
bImg="關閉";
}
}
</script>

示例：

牛B的js 時間控件(年月日時分秒)

2024年DataOps趨勢預測：AI不會取代數據工程師

雲原生週刊：K8s 中的服務和網絡｜ 2024.4.29

通過Http鏈接地址爬取有贊微信商城商品信息及下載至EXCEL

多人同時導出 Excel 幹崩服務器！新來的阿里大佬給出的解決方案太優雅了！

[轉帖]cpupower

今天，昨天，近七天，近30天，近90天，js封裝

華爲云云原生FinOps解決方案，釋放雲原生最大價值

屬性值如何轉換爲？即在java中如何得到struts的bean:write的值

javamail pop3 原理

Ext.data.Store的基本用法-轉載

js 日期控件

牛B的js 時間控件(年月日時分秒)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結