html日期控件

最新推荐文章于 2023-06-17 14:58:56 发布
最新推荐文章于 2023-06-17 14:58:56 发布
阅读量6.7k 收藏
点赞数
分类专栏： 软件开发 文章标签： html border string url javascript function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hiyu2218/article/details/1757698
版权

把以下4个文件放到同一个文件夹下,运行 test.html 即可

//文件 DateBox.html  

<!--  
<html> 
<head> 
<title>hiyu</title> 
<LINK href="./tenkey.css" type=text/css rel=stylesheet> 
<meta http-equiv="Content-Language" content="ja"> 
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> 
<meta http-equiv="Expires" content="-10"> 
<meta http-equiv="Pragma" content="No-cache"> 
<meta http-equiv="Cache-Control", "private"> 
</head> 
<SCRIPT language=javascript> 
         var getStr=window.dialogArguments;   
</script> 
<body onLoad=" Initform();document.frmMain.btnCancel.focus();" onContextmenu="return false;"> 
<form id="frmMain" name="frmCld"> 
         <TABLE id="tblHead" class="TrW" border="0" cellspacing="0" cellpadding="2" bgcolor="#ffffff" style="margin-top:8px;"> 
                   <TR > 
                            <TD width="30%" height="35" align="left" style="padding-top:12px;"> 
                                     <SELECT　style="font-size:32px;　width:75%; height:100%;" id="selYaer" name="selYaer" onChange="InitCalendar(this.value,window.document.frmMain.selMon.value,0)"> 
                                     </SELECT> 
                            </TD> 
                            <TD width="40%" align="center"> 
                                     <INPUT class="BtnSetToday1" οnclick="SetToday()" type="button" value="本日を選択" ID="btnToday" NAME="btnToday"> 
                            </TD> 
                            <TD width="30%" align="right" style="padding-top:12px;" > 
                                     <SELECT style="font-size:32px; width:75%; height:100%;" id="selMon" name="selMon" onChange="InitCalendar(window.document.frmMain.selYaer.value,this.value,0)"> 
                                               <OPTION value="1">1月</OPTION> 
                                               <OPTION value="2">2月</OPTION> 
                                               <OPTION value="3">3月</OPTION> 
                                               <OPTION value="4">4月</OPTION> 
                                               <OPTION value="5">5月</OPTION> 
                                               <OPTION value="6">6月</OPTION> 
                                               <OPTION value="7">7月</OPTION> 
                                               <OPTION value="8">8月</OPTION> 
                                               <OPTION value="9">9月</OPTION> 
                                               <OPTION value="10">10月</OPTION> 
                                               <OPTION value="11">11月</OPTION> 
                                               <OPTION value="12">12月</OPTION> 
                                     </SELECT> 
                            </TD> 
                   </TR> 
         </TABLE>  
         <Table class="TrW" border="0" cellspacing="0" cellpadding="2" bgcolor="#FFFFFF" style="margin-top:5px;"> 
         <TR><TD ALIGN=left valign=top> 
         <TABLE width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFCC"> 
                   <TR><TD valign="top" bgcolor="#808080" ALIGN="center"> 
                            <TABLE width="100%" id="tblCal" border="0" cellspacing="1" cellpadding="0"> 
                                     <tr class="TrH"> 
                                               <td align="center" class="Sunday">日</td> 
                                               <td align="center" class="Weektitle">一</td> 
                                               <td align="center" class="Weektitle">二</td> 
                                               <td align="center" class="Weektitle">三</td> 
                                               <td align="center" class="Weektitle">四</td> 
                                               <td align="center" class="Weektitle">五</td> 
                                              <td align="center" class="Saturday">六</td> 
                                     </tr> 
                                     <tr class="TrH"> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');" onMouseOut="SetBackColorByMouseOut(this);"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"> 
                                               </td> 
                                     </tr> 
                                     <tr class="TrH"> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');" onMouseOut="SetBackColorByMouseOut(this);"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                     </tr> 
                                     <tr class="TrH"> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');" onMouseOut="SetBackColorByMouseOut(this);"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                     </tr> 
                                     <tr class="TrH"> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');" onMouseOut="SetBackColorByMouseOut(this);"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                     </tr> 
                                     <tr class="TrH"> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');" onMouseOut="SetBackColorByMouseOut(this);"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                     </tr> 
                                     <tr class="TrH"> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');" onMouseOut="SetBackColorByMouseOut(this);"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                               <td align="center" class="CalendarCell" onClick="SetDate(this)" onMouseOut="SetBackColorByMouseOut(this);" 
                                                        οnmοuseοver="SetBackColorByMouseOver(this,'#FFFF80');"></td> 
                                     </tr> 
                            </TABLE> 
                            </TD></TR> 
         </TABLE> 
         </TD></TR> 
</TABLE> 
<TABLE cellSpacing="0" cellPadding="2" width="100%" bgColor="#ffffff" border="0" style="margin-top:5px; font-size:32px;"> 
         <TR height="58"> 
                   <TD width="35%" align="left"> 
                            <INPUT class="BtnChgCalendar1" type="button" value="前年" align="right" onClick="ChangeCalendar(0,1)">&nbsp; 
                            <INPUT class="BtnChgCalendar1" type="button" align="right" value="前月" onClick="ChangeCalendar(1,1)"> 
                   </TD> 
                   <TD width="30%" align="center"> 
                            <INPUT name="btnCancel" class="BtnCalendarCancel1" οnclick="CloseWindow();" type="button" value="CLOSE"> 
                   </TD> 
                   <TD width="35%" align="right"> 
                            <INPUT class="BtnChgCalendar1" type="button" value="翌月" onClick="ChangeCalendar(1,0)">&nbsp; 
                            <INPUT class="BtnChgCalendar1" type="button" align="right" value="翌年" onClick="ChangeCalendar(0,0)"> 
                   </TD> 
         </TR> 
</TABLE> 
</form> 
</body> 
</html> 
<Script Language="javascript1.2"> 
 
function Initform() { 
         var initDate = getStr[0]; 
         if (initDate == "") { 
                   InitCalendar(0, 0, 0); 
         } else { 
                   initDate = new Date(initDate); 
                   InitCalendar(initDate.getFullYear(), initDate.getMonth() + 1, initDate.getDate()); 
         } 
} 
//************************************** 
 
//　カレンダーを初期化 
//************************************** 
function InitCalendar(p_Year,p_Mon,p_Day) { 
    InitYearSel(p_Year); 
    InitMonSel(p_Mon); 
    InitDay(window.document.frmMain.selYaer.value,window.document.frmMain.selMon.value,p_Day); 
} 
//************************************** 
 
//　日付を変わり 
// p_Mode:0 年   1 月 
// p_Plus:0 ＋   1 - 
//************************************** 
function ChangeCalendar(p_Mode,p_Plus) { 
         if(0==p_Mode) { //年 
                   if(0==p_Plus) { 
                            InitCalendar((window.document.frmMain.selYaer.value-(-1)),window.document.frmMain.selMon.value,0); 
                   } else if(1==p_Plus) { 
                            InitCalendar((window.document.frmMain.selYaer.value-1),window.document.frmMain.selMon.value,0) 
                   } 
         } else if(1==p_Mode) { //月 
                   if(0==p_Plus) { 
                            if(12==window.document.frmMain.selMon.value) { 
                                     InitCalendar((window.document.frmMain.selYaer.value-(-1)),1,0); 
                            } else { 
                                InitCalendar(window.document.frmMain.selYaer.value,(window.document.frmMain.selMon.value-(-1)),0); 
                            } 
                   } else if(1==p_Plus) { 
                            if(1==window.document.frmMain.selMon.value) { 
                                     InitCalendar((window.document.frmMain.selYaer.value-1),12,0) 
                            } else { 
                                     InitCalendar(window.document.frmMain.selYaer.value,(window.document.frmMain.selMon.value-1),0); 
                            } 
                   } 
         } 
} 
//************************************** 
 
//　年部分初期化 
//************************************** 
function InitYearSel(p_Year) { 
         if(0==p_Year) { 
                   var d = new Date(); 
                   p_Year = d.getYear(); 
         } 
         //Select中に年数を追加 
         //先ずクリア 
         var selLen = window.document.frmMain.selYaer.options.length; 
         for(j=0;j<selLen;j++) { 
            window.document.frmMain.selYaer.options.remove(selLen-(j+1)); 
         } 
         var arrYear = new Array(); 
         for (i = -5; i<6; i++) { 
       var oOption = document.createElement("OPTION"); 
            window.document.frmMain.selYaer.options.add(oOption); 
            oOption.innerText = p_Year - (-i); 
            oOption.value = p_Year - (-i); 
          } 
　　//年を選択する 
         window.document.frmMain.selYaer.value = p_Year; 
} 
//************************************** 
 
//　月部分初期化 
//************************************** 
function InitMonSel(p_Mon) { 
         if(0==p_Mon) { 
             var d = new Date(); 
                   p_Mon = d.getMonth() + 1; //0 <= getMonth <= 11 
         } 
         //月を選択する 
         window.document.frmMain.selMon.value = p_Mon; 
} 
//************************************** 
 
//　日付部分初期化 
//************************************** 
function InitDay(p_Year,p_Mon,p_Day) { 
         if(0==p_Day) { 
             var now = new Date(); 
                   p_Day = now.getDate(); 
         } 
         var indexDay = GetFirstDayIndexInWeek(p_Year,p_Mon);   //0-6 
         var allDays = GetDaysInMonth(p_Year,p_Mon); 
         //前の月 
         var preDay = AddMonth(p_Year,p_Mon,-1); 
         var prealldays = GetDaysInMonth(preDay.substring(0,4),preDay.substring(4,(preDay.length-4))); 
         //今日の日 
         var now = new Date(); 
         var nowDay = now.getDate(); 
         var blnEque = IsSameYearMon(p_Year,p_Mon);   //今操作の日付はシステムの年と月は同じですか 
         //rows=7 cols=7 
         //先ずTable部分をクリア 
         for (i=1; i<7; i++) { //i=0 is title 
         for (j=0; j<7; j++) { 
                   document.all.tblCal.rows(i).cells(j).innerText=""; 
                            document.all.tblCal.rows(i).cells(j).style.backgroundColor = "#FFFFCC"; 
         } 
    } 
         for (i=1; i<7; i++) { //i=0 is title 
         for (j=0; j<7; j++) { 
                            if(((i-1)*7 + j) < indexDay) { 
                //前の月 
                                     //document.all.tblCal.rows(i).cells(j).innerText = prealldays - (indexDay- ((i-1)*7 + j)); 
                            } else { 
                                     var strDayTmp = (((i-1)*7 + j)-indexDay) + 1 
                                     if(strDayTmp <= allDays) { //Current Day <= All Days 
                                               document.all.tblCal.rows(i).cells(j).innerText = strDayTmp; 
                                               if (p_Day == 0) { 
                                                        if((blnEque==1) && (nowDay==strDayTmp)) { 
                                                                  document.all.tblCal.rows(i).cells(j).style.backgroundColor = "#FFEE00"; 
                                                        } 
                                               } else { 
                                                        if((blnEque==1) && (p_Day==strDayTmp)) { 
                                                           document.all.tblCal.rows(i).cells(j).style.backgroundColor = "#FFEE00"; 
                                                        } else if ((blnEque==2) && (p_Day==strDayTmp)) { 
                                                                 document.all.tblCal.rows(i).cells(j).style.backgroundColor = "#FFEE00"; 
                                                        } 
                                               } 
                                     } else { //次の月 
                  // 
                                     } 
                            } 
                   } 
         } 
} 
 
//************************************** 
 
//　IsSameYearMon 
//************************************** 
function IsSameYearMon(p_Year,p_Mon) { 
         var blnRet=0; 
         var now = new Date(); 
         if((p_Year==now.getYear()) && (p_Mon==(now.getMonth() + 1))) { 
                   blnRet = 1; 
         } else { 
                   blnRet = 2; 
         } 
         return blnRet; 
} 
//************************************** 
 
//　AddMonth 
//************************************** 
function AddMonth(p_Year,p_Mon,p_Plus) { 
    p_Mon = p_Mon + p_Plus; 
   var years = p_Plus/12; 
    if(years == 0) { 
                   years =years + 1; 
    } 
         if(p_Mon > 12) { 
                   p_Mon = p_Mon -12; 
                   p_Year = p_Year + years 
         } else if (p_Mon <= 0) { 
                   p_Mon = p_Mon +12; 
                   p_Year = p_Year - years; 
         } 
         return (p_Year.toString() + p_Mon.toString()); 
} 
//************************************** 
 
//　IsLeapYear 
//************************************** 
function IseapYear(p_year) { 
 if (((p_year % 4)==0) && ((p_year % 100)!=0) || ((p_year % 400)==0)) { 
         return (1); 
 } else { 
    return (0); 
 } 
} 
//************************************** 
 
//　GetDaysInMonth 
//************************************** 
function GetDaysInMonth(p_year,p_Mon) { 
   var days; 
   if (p_Mon==1 || p_Mon==3 || p_Mon==5 || p_Mon==7 || p_Mon==8 || p_Mon==10 || p_Mon==12) { 
       days = 31; 
   } else if(p_Mon==4 || p_Mon==6 || p_Mon==9 || p_Mon==11) { 
             days = 30; 
   } else if(p_Mon==2) { 
      if(IseapYear(p_year)==1) { 
       days = 29; 
      } else { 
       days = 28; 
      } 
   } 
   return days; 
} 
//************************************** 
 
//　OnMouseOut BackColorをセット 
//************************************** 
function SetBackColorByMouseOut(p_obj) { 
         var blnRet = IsSameYearMon(window.document.frmMain.selYaer.value,window.document.frmMain.selMon.value); 
         var now = new Date(); 
         if(blnRet==1 && p_obj.innerText==now.getDate()) { 
            p_obj.style.backgroundColor="#FFEE00"; 
    } else {                
                   p_obj.style.backgroundColor="#FFFFCC";                  
         } 
} 
//************************************** 
 
//　OnMouseOver BackColorをセット 
//************************************** 
function SetBackColorByMouseOver(p_obj,p_Color) { 
         if(p_obj.innerText != "") { 
                   p_obj.style.backgroundColor=p_Color; 
         } 
} 
//************************************** 
 
//　GetFirstDayIndexInWeek 
// 0:日 1:月 2:火 3:水 4:木 5:金 6:土 
//************************************** 
function GetFirstDayIndexInWeek(p_Year,p_Mon) { 
    return GetDayOfWeek(p_Year,p_Mon,1); 
} 
/************************************** 
 
/
//　GetDayOfWeek 
// 0:日 1:月 2:火 3:水 4:木 5:金 6:土 
//************************************** 
function GetDayOfWeek(p_Year,p_Mon,p_Day){ 
         var d = new Date(p_Year,(p_Mon-1),p_Day); //p_Mon is from 0-11 
    return d.getDay(); 
} 
//************************************** 
 
//　GetYobi 
// 0:日 1:月 2:火 3:水 4:木 5:金 6:土 
//************************************** 
function GetYobi(p_WeekIndex){ 
         var rtn; 
         switch (p_WeekIndex){ 
                   case 0: rtn = "日"; break; 
                   case 1: rtn = "一"; break; 
                   case 2: rtn = "二"; break; 
                  case 3: rtn = "三"; break; 
                   case 4: rtn = "四"; break; 
                   case 5: rtn = "五"; break; 
                   case 6: rtn = "六"; break; 
         } 
         return rtn; 
} 
//************************************** 
 
//　SetDate 
// 親画面に日付を戻る    yyyy-mm-dd 
//************************************** 
function SetDate(p_obj) { 
         var strYear = window.document.frmMain.selYaer.value; 
         var strMon = window.document.frmMain.selMon.value; 
         var strDay = p_obj.innerText; 
         if(strDay != ""){ 
                   var iWeek = GetDayOfWeek(strYear,strMon,strDay); 
                   var strYobi = GetYobi(iWeek); 
                   if(strMon < 10){//2桁になる 
                            strMon = "0" + strMon; 
                   } 
                   if(strDay < 10){ 
                            strDay = "0" + strDay; 
                   } 
                   window.returnValue = strYear + "-" + strMon + "-" + strDay; 
                   self.close(); 
         } 
} 
//************************************** 
 
//　SetDate 
// 親画面に日付を戻る    yyyy-mm-dd 
//************************************** 
function SetToday() { 
    var d = new Date(); 
         var strYear = d.getYear(); 
         var strMon = d.getMonth() + 1; 
         var strDay = d.getDate(); 
         var iWeek = GetDayOfWeek(strYear,strMon,strDay); 
         var strYobi = GetYobi(iWeek);        
         if(strMon < 10){//2桁になる 
                   strMon = "0" + strMon; 
         } 
         if(strDay < 10){ 
                   strDay = "0" + strDay; 
         } 
         window.returnValue = strYear + "-" + strMon + "-" + strDay; 
         self.close(); 
} 
//************************************** 
 
//　CloseWindow 
// 親画面にNULLを戻る,画面を閉じる 
//************************************** 
function CloseWindow() { 
         //window.returnValue = ""; 
         self.close(); 
} 
</Script> 

 

 

//文件 tenkey.css

TABLE  { 

         BORDER-LEFT-COLOR: #000000; BORDER-BOTTOM-COLOR: #000000; BORDER-TOP-COLOR: #000000; BORDER-COLLAPSE: collapse; BORDER-RIGHT-COLOR: #000000 

}  

TD  { 

         FONT-SIZE: 11pt; BORDER-LEFT-COLOR: #d7d7d7; BORDER-BOTTOM-COLOR: #d7d7d7; COLOR: black; BORDER-TOP-COLOR: #d7d7d7; BORDER-RIGHT-COLOR: #d7d7d7 

}  

.TDBorder  { 

         FONT-SIZE: 11pt; BORDER-LEFT-COLOR: #000000; BORDER-BOTTOM-COLOR: #000000; COLOR: black; BORDER-TOP-COLOR: #000000; BORDER-RIGHT-COLOR: #000000 

}  

.Main  { 

         OVERFLOW: auto; align: center 

}  

.BodyStyle  { 

         MARGIN: 0px; align: center 

}  

.Header  { 

         FONT-SIZE: 11pt; COLOR: #ffffff; BACKGROUND-COLOR: #ff9933 

}  

.HeadertitleC  { 

         FONT-SIZE: 17pt; BACKGROUND-IMAGE: url(); COLOR: #ffffff; BACKGROUND-COLOR: #ff9933 

}  

.HeadertitleL  { 

         FONT-SIZE: 11pt; BACKGROUND-IMAGE: url(); WIDTH: 7px; COLOR: #ffffff; BACKGROUND-COLOR: #ff9933 

}  

.HeadertitleR  { 

         FONT-SIZE: 11pt; BACKGROUND-IMAGE: url(); WIDTH: 7px; COLOR: #ffffff; BACKGROUND-COLOR: #ff9933 

}  

.HeaderNavi  { 

         FONT-SIZE: 11pt; BACKGROUND-IMAGE: url(); COLOR: #ffffff; BACKGROUND-COLOR: #cc3333 

}  

.HeaderNaviLink  { 

         COLOR: #ffff66 

}  

.FooterBG  { 

         FONT-SIZE: 9pt; BACKGROUND-IMAGE: url); COLOR: #000000; BACKGROUND-COLOR: #ff9933 

}  

.Footer  { 

         HEIGHT: 50px; BACKGROUND-COLOR: #ff6699 

}  

.TableBorder  { 

         BORDER-RIGHT: gray 2px solid; BORDER-TOP: gray 2px solid; BORDER-LEFT: gray 2px solid; BORDER-BOTTOM: gray 2px solid 

}  

.TokyoFoodButtonRegist  { 

         PADDING-RIGHT: 0px; BACKGROUND-POSITION: 15% 50%; FONT-WEIGHT: bold; FONT-SIZE: 15px; BACKGROUND-IMAGE: url(); VERTICAL-ALIGN: middle; WIDTH: 110px; COLOR: #ff0000; BACKGROUND-REPEAT: no-repeat; HEIGHT: 40px; BACKGROUND-COLOR: #ffffcc; TEXT-ALIGN: center 


}  

.TokyoFoodButtonMenuBack  { 

         PADDING-RIGHT: 10px; BACKGROUND-POSITION: 15% 50%; FONT-WEIGHT: bold; FONT-SIZE: 15px; BACKGROUND-IMAGE: url(); VERTICAL-ALIGN: middle; WIDTH: 110px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 40px; BACKGROUND-COLOR: #ffffcc; TEXT-ALIGN: right 

}  

.TokyoFoodButtonPrint  { 

         PADDING-RIGHT: 0px; BACKGROUND-POSITION: 15% 50%; FONT-WEIGHT: bold; FONT-SIZE: 15px; BACKGROUND-IMAGE: url(); VERTICAL-ALIGN: middle; WIDTH: 110px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 40px; BACKGROUND-COLOR: #ffffcc; TEXT-ALIGN: center 

}  

.TokyoFoodButtonBack  { 

         PADDING-RIGHT: 0px; BACKGROUND-POSITION: 15% 50%; FONT-WEIGHT: bold; FONT-SIZE: 15px; BACKGROUND-IMAGE: url(); VERTICAL-ALIGN: middle; WIDTH: 110px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 40px; BACKGROUND-COLOR: #ffffcc; TEXT-ALIGN: center 

}  

.CellControlBox  { 

         FONT-SIZE: 12pt; BACKGROUND-IMAGE: url(); BACKGROUND-COLOR: #ff9933 

}  

.CalcNTd  { 

         BACKGROUND-POSITION: center; VERTICAL-ALIGN: middle; BACKGROUND-REPEAT: no-repeat; TEXT-ALIGN: center 

}  

.BtnChgCalendar1 { 

         font-size:32px; 

         width:40%; 

         border:2px solid #999999; 

         background:#F4C062; 

         color:#000000; 

}  

.BtnSetToday1 { 

         font-size:32px; 

         width:75%; 

         border:2px solid #999999; 

         background:#F4C062; 

         color:#ff0000; 

}  

.BtnCalendarCancel1 { 

         font-size:32px; 

         width:80%; 

         border:2px solid #999999; 

         background:#F4C062; 

         color:#0000ff; 

}  

.Sunday { 

         background-color:#FF0000; 

         color:#FFFFFF; 

         font-weight:bold; 

         font-size:32px; 

}  

.Saturday { 

 
         background:#0000FF; 

         color:#FFFFFF; 

         font-weight:bold; 

         font-size:32px; 

}  

.Weektitle { 

 
         background:#FFFF99; 

         font-weight:bold; 

         font-size:32px; 

}  

.BtnChgCalendar { 

 
         font-size:32px; 

         width:40%; 

         border:1px solid #CC3333; 

         background:#FF9933; 

         color:#FFFFFF; 

}  

.BtnCalendarCancel { 

 
         font-size:32px; 

         width:70%; 

         border:1px solid #666666; 

         background:#CC3333; 

         color:#FFFFFF; 

}  

.TrSide  { 

         width:564; 

         height:52; 

}  

.TrH  { 

         height:52; 

}  

.TrW  { 

         width:564; 

}  

.BtnSetToday { 

         font-size:32px; 

         width:60%; 

         border:1px solid #CC3333; 

         background:#FF9933; 

         color:#FFFFFF; 

}  

.CalendarCell { 

 
         font-weight:bold; 

         font-size:32px; 

}  

 

//文件 tenkey.js  

var url="" ; 


 /** 

 * 

*textId 

*setDate 

*nowSet:aways==setDate 

* 

**/  

function setDate(setDate,textId) { 

                   if(setDate){ 

                   }else{ 

                            if(textId){ 

                                     if((document.getElementById(textId).value).length>0){ 

                                               setDate=document.getElementById(textId).value; 

                                     }else{ 

                                               setDate=new Date(); 

                                     } 

                            }else{ 

                                     setDate=new Date(); 

                            } 

                   } 

         setDate=getDateType(setDate);                                              

         return showDateBox(setDate) 

}  


function showDateBox(setDate) { 

         var mxh1 = new Array(setDate,""); 

         var mstr=window.showModalDialog(url+"DateBox.html" + "?temp=" + new Date(), mxh1,"dialogWidth: 570px;dialogHeight: 550px;help: no;status: no;unadorne: yes;scroll: no ");                              

         if(mstr!=null) 

                   return mstr; 

}  


 
function getDateType(strValue)  { 

         if(strValue.length>0){ 

                   var r = strValue.match(/^(d{1,4})(-|/)(d{1,2})2(d{1,2})$/); 

                   if(r==null) { 

                            strValue=new Date(); 

                   }else{ 

                            strValue = new Date(r[1], r[3]-1,r[4]); 

                   } 

         }        

         var dCurMonth =String(strValue.getMonth()+1).length==1?("0"+String(strValue.getMonth()+1)):String(strValue.getMonth()+1); 

         var dCurDayOfMonth = String(strValue.getDate()).length==1?("0"+String(strValue.getDate())):String(strValue.getDate()); 

         var dCurYear =String(strValue.getFullYear()); 

         strValue=dCurYear +"/"+dCurMonth+ "/"+dCurDayOfMonth; 

         return strValue; 

}  

 

//文件 test.html 

<html:html> 

<HEAD> 

<title>text</title> 

<meta http-equiv="Content-Language" content="ja"> 

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> 

</HEAD> 

<SCRIPT language="javascript" src="tenkey.js"></SCRIPT> 

<SCRIPT > 

function getDateValue(textValue,textId){ 

         return setDate(textValue,textId);   

} 

</SCRIPT> 

</head> 

<body> 

         <input type="text" id="text1"/> 

         <hr><br><br> 

         <input type="button" onclick="getDateValue('','text1')" value="日期"/> 

         <hr><br><br>ByValue 

         <input type="button" onclick="getDateValue('2004/4/05','text1')" value="日期"/> 

</body> 

</html:html> 

 

 nullnullnullnull
hiyu2218
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML中带时间的日期控件
11-19
HTML中带时间的日期控件 HTML中带时间的日期控件
HTML日期控件
青椒的博客
01-08 1470
年/月/日<input type=”date”/> –年--周<input type=”week”/> –年--月<input type=”month”/> – ：–（时间）<input type=”time”/> 年/月/日 --：-- <input type=”datetime”/> 本地日期时间<input type=”da...
html datetime控件 到时分秒,日期控件：datepicker（bootstrap）支持时分秒
weixin_30045597的博客
06-07 984
记录一下日期控件，datepicker-bootstrap；这个控件支持年月日以及时分秒。首先需要到官网下载其js、cs样式2、页面应用：(支持年月日)创建时间至name="lsc_enddate" placeholder="结束日期" type="text">$('#lsc_startdate').datepicker({format : 'yyyy-mm-dd',language : ...
html下拉列表框做日期,几种常用的控件（下拉框 可选框 起止日期 在HTML页面直接读取当前时间）...
weixin_28973855的博客
06-04 2546
下拉框状态----请选择----制单已提交已审核可选框value="Y" checked="checked" id="isValid">是否有效起止日期起止日期class="input-sm form-control date-picker" name="startDate" /> class="fa fa-exchange">data-date-format="yyyy-mm-...
html时间选择控件 简书,前端开发阶段-HTML、CSS
weixin_42522167的博客
06-03 550
HTML技术HTML(Hyper Text Markup Language)即超文本标记语言，是用来编写网页文件的标准，定义了一组标记(tag，也称标签)用来描述Web文档数据。网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。HTML代码：用于展示需要显示的数据CSS代码：使显示的数据更好看JavaScript代码：使整个页面显示的数据具有动画效果网页根据内容是否改变分为：...
html年月日时分秒空间,js时间控件（年月日时分秒）
weixin_32099979的博客
06-05 1519
这部分是时间控件的的js代码，NewTime.jsvar bMoveable=true;var strFrame;document.writeln('');strFrame='';strFrame+='';strFrame+='var datelayerx,datelayery;';strFrame+='var bDrag;';strFrame+='function document.onmous...
HTML5时间控件
huangmingcsdn的博客
11-26 2290
日期控件 - date <input type="date" value="2015-09-24"/> 时间控件 - time <input type="time" value="13:59"/> <input type="time" value="13:59:59"/> 日期时间控件 - datetime-local 日期控件12小时制,可点击下午或上午后输入a或p修改 <input type="datetime-local" value="2015-09
HTML 时间控件
热门推荐
typeof_的专栏
01-25 1万+
在做表单的时候，有时候需要输入时间，为了避免输入的麻烦，可以选择一些现成的时间控件。 本文提供一个简单的样例，示例代码如下：（要成功运行，需要保持和本文对应的目录结构）。js/ css/ 。
HTML日期选择器：简化日期输入与交互
a451319296的博客
06-17 7465
HTML日期选择器（Date Picker）是一种方便的用户界面元素，用于简化日期输入和交互。通过使用元素的type="date"属性，可以轻松创建日期选择器。用户可以从交互式日历中选择日期值，并且日期格式通常遵循ISO 8601标准。日期选择器还支持设置最小值和最大值以限制日期范围。通过JavaScript，可以获取用户选择的日期值，进而进行后续处理。HTML日期选择器在现代浏览器中得到广泛支持，尽管在旧版本浏览器上可能有不同的呈现方式或不支持。了解和应用HTML日期选择器可以提高表单交互性
HTML5超简单的日期时间控件
weixin_45015094的博客
05-06 1500
HTML日期控件和时间控件 时间都是宝贵的，尤其是开发人员，所以为了节省时间，我直接展示下效果，符合您的要求就采纳，不符合，就不用继续看了！ 日期控件效果： 时间控件展示： 日期控件 <div class="col-md-6"> <label for="">填报日期: </label> <input class="" id="" type="...
Html时间自定义控件
Yanping-1003
04-09 1953
自定义HTML时间控件控件中已实现的功能    1、根据给定的年和月布局时间控件    2、往时间控件中添加小圆点标识(单个添加和批量添加--单个传当月日期，多个传日期数组)    3、对控件中前、后月份日期的点击事件（灰色日期），当前月份日期点击事件    4、日期控件css样式部分自由修改源代码下载链接：下载时间控件源码文件效果截图：调用代码&lt;!doctype html&gt; &lt;...
HTML自定义时间控件
04-09
自定义HTML时间控件：控件中已实现的功能 1、根据给定的年和月绘画出时间控件 2、往时间控件中添加小圆点标识(单个添加和批量添加--单个传当月日期，多个传日期数组) 3、对控件中前、后月份日期的点击事件（灰色日期），当前月份日期点击事件 4、日期控件css样式部分自由修改
php html日期控件.rar
06-26
php日期控件php日期控件
简单的html日期控件
10-02
超好用简单的html日期控件。将整个文件夹拷贝到你的工程下，在html页面直接引用WdatePicker.js即可
HTML5 日历控件
02-02
HTML5的日历控件，目前运用在利用HTML5开发的IOS和Android系统中，可扩展性好；控件支持各种日期事件，界面优
Oracle Sqlload
紫竹铃
07-14 5596
 控制文件基本格式：LOAD DATAINFILE  T.DAT   // 要导入的数据文件(格式1) INFILE  TT.DAT  // 导入多个文件(可以和格式1并列使用) APPEND INTO TABLE TABLE_NAME // 指定装入的表(这里有几种加载方式) 以下是4种装入表的方式 APPEND     //原先的表有数据就加在后面 INSERT     // 装载
java压缩解压缩完整例子（仅支持lzh格式）
紫竹铃
01-25 4904
 把下面文件放入同一目录下，运行使用 Run As Java Application 即可//文件DirectoryZip.java,  压缩文件例子import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import jp.gr.java_conf.dangan.util
携程日期控件html5
最新发布
08-01
携程日期控件html5是一种用于在网页上选择日期的工具。它基于HTML5技术开发，具有简洁明了的界面和方便实用的功能。 使用携程日期控件，用户可以轻松地在网页上选择出行日期。控件提供了一个日历界面，用户只需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值