Home > Web Front-end > JS Tutorial > Input date selection function javascript code_time and date

Input date selection function javascript code_time and date

WBOY
Release: 2016-05-16 18:39:22
Original
1276 people have browsed it
Input date selection function javascript code_time and date

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute
]<script> document.writeln('<div id="meizzDateLayer" style="position: absolute; width: 182; height: 166; z-index: 9998; display: none">'); document.writeln(' <span id="tmpSelectYearLayer" style="z-index: 9999;position: absolute;top: 2; left: 18;display: none">'); document.writeln(' <span id="tmpSelectMonthLayer" style="z-index: 9999;position: absolute;top: 2; left: 75;display: none">'); document.writeln(' <table border="0" cellspacing="1" cellpadding="0" width="100%" height="160" bgcolor="#808080" onselectstart="return false">'); document.writeln(' <tr>'); document.writeln(' <td width="100%" height="23" bgcolor="#FFFFFF">'); document.writeln(' <table border="0" cellspacing="1" cellpadding="0" width="100%" height="23">'); document.writeln(' <tr align="center">'); document.writeln(' <td width="25" align="center" bgcolor="#808080" style="font-size:12px;cursor: hand;color: #FFFFFF"'); document.writeln(' onclick="meizzPrevM()" title="向前翻月" Author="meizz"><b Author="meizz"><</b>'); document.writeln(' </td>'); document.writeln(' <td width="" align="center" style="font-size:13px; font-weight:normal; cursor:default" Author="meizz">'); document.writeln(' <span Author="meizz" id="meizzYearHead" onclick="tmpSelectYearInnerHTML(this.innerText)"></span> 年 <span id="meizzMonthHead" Author="meizz" onclick="tmpSelectMonthInnerHTML(this.innerText)"></span> 月</td>'); document.writeln(' <td width="25" bgcolor="#808080" align="center" style="font-size:12px;cursor: hand;color: #FFFFFF"'); document.writeln(' onclick="meizzNextM()" title="往后翻月" Author="meizz"><b Author="meizz">>'); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' <tr>'); document.writeln(' <td width="100%" height="18" bgcolor="#808080">'); document.writeln(' <table border="0" cellspacing="0" cellpadding="0" width="99%" height="1" style="cursor:default">'); document.writeln(' <tr align="center">'); document.writeln(' <td style="font-size:12px;color:#FFFFFF" Author="meizz">日'); document.writeln(' <td style="font-size:12px;color:#FFFFFF" Author="meizz">一'); document.writeln(' <td style="font-size:12px;color:#FFFFFF" Author="meizz">二'); document.writeln(' <td style="font-size:12px;color:#FFFFFF" Author="meizz">三'); document.writeln(' <td style="font-size:12px;color:#FFFFFF" Author="meizz">四'); document.writeln(' <td style="font-size:12px;color:#FFFFFF" Author="meizz">五'); document.writeln(' <td style="font-size:12px;color:#FFFFFF" Author="meizz">六'); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' <tr>'); document.writeln(' <td width="100%" height="120">'); document.writeln(' <table border="0" cellspacing="1" cellpadding="0" width="100%" height="120" bgcolor="#FFFFFF">'); var n=0;for (j=0;j<5;j++){ document.writeln('<tr align=center>'); for (i=0;i<7;i++){ document.writeln('<td width=20 height=20 id=meizzDay'+n+' style=font-size:12px Author=meizz onclick=meizzDayClick(this.innerText)>');n++;} document.writeln('');} document.writeln(' <tr align="center">'); document.writeln(' <td width="20" height="20" style="font-size:12px" id="meizzDay35" Author="meizz" onclick="meizzDayClick(this.innerText)">'); document.writeln(' <td width="20" height="20" style="font-size:12px" id="meizzDay36" Author="meizz" onclick="meizzDayClick(this.innerText)">'); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' <tr>'); document.writeln(' <td>'); document.writeln(' <table border="0" cellspacing="1" cellpadding="0" width="100%" bgcolor="#FFFFFF">'); document.writeln(' <tr>'); document.writeln(' <td Author="meizz" align="left"><input Author="meizz" type="button" value="<<" title="向前翻年" onclick="meizzPrevY()" onfocus="this.blur()"'); document.writeln(' class="FlatButton2" ID="Button1" NAME="Button1"><input Author="meizz" title="向前翻月" type="button" value="<" onclick="meizzPrevM()" onfocus="this.blur()"'); document.writeln(' class="FlatButton2" ID="Utton1" NAME="Utton1">'); document.writeln(' <td Author="meizz" align="center"><input Author="meizz" type="button" value="今天" onclick="meizzToday()" onfocus="this.blur()"'); document.writeln(' title="转到今天的日期" class="FlatButton" ID="Button2" NAME="Button2">'); document.writeln(' <td Author="meizz" align="right"><input Author="meizz" type="button" value=">" onclick="meizzNextM()" onfocus="this.blur()"'); document.writeln(' title="往后翻月" class="FlatButton2" ID="Button3" NAME="Button3"><input Author="meizz" type="button" value=">>" title="往后翻年" onclick="meizzNextY()" onfocus="this.blur()"'); document.writeln(' class="FlatButton2" ID="Button4" NAME="Button4">'); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln('<iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:200px; height:200px; z-index:-1; filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";">'); document.writeln(''); document.writeln('<style type="text/css">'); document.writeln('.FlatButton {background-color: #f0f0f0; color: #000000;font-family:宋体;'); document.writeln(' font-size: 12px;position:relative;width:64px;height:20px;valign:top;cursor:hand;'); document.writeln(' border-left: 1px solid #DDDDDD; border-right: 1px solid #999999; '); document.writeln(' border-top: 1px solid #DDDDDD; border-bottom: 1px solid #999999 ;'); document.writeln(' }'); document.writeln(' .FlatButton2 {background-color: #f0f0f0; color: #000000;font-family:宋体;'); document.writeln(' font-size: 12px;position:relative;height:20px;valign:top;cursor:hand;'); document.writeln(' border-left: 1px solid #DDDDDD; border-right: 1px solid #999999; '); document.writeln(' border-top: 1px solid #DDDDDD; border-bottom: 1px solid #999999 ;'); document.writeln(' }'); document.writeln(''); var outObject; function setday(tt,obj) //主调函数 { if (arguments.length > 2){alert("对不起!传入本控件的参数太多!");return;} if (arguments.length == 0){alert("对不起!您没有传回本控件任何参数!");return;} var dads = document.all.meizzDateLayer.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; dads.display = ''; event.returnValue=false; }  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 meizzWDay=new Array(37); //定义写日期的数组  function document.onclick() //任意点击时关闭该控件 { with(window.event.srcElement) { if (tagName != "INPUT" && getAttribute("Author")==null) { document.all.meizzDateLayer.style.display="none"; //add on 2004-9-7 //begin if (document.getElementsByTagName("select")) { var obj; obj=document.getElementsByTagName("select"); for (i=0;i<obj.length;i++) { if (obj[i].style.display=="none") {obj[i].style.display="block";} } } //end } } }  function meizzWriteHead(yy,mm) //往 head 中写入当前的年与月 { document.all.meizzYearHead.innerText = yy; document.all.meizzMonthHead.innerText = mm; }  function tmpSelectYearInnerHTML(strYear) //年份的下拉框 { if (strYear.match(/\D/)!=null){alert("年份输入参数不是数字!");return;} var m = (strYear) ? strYear : new Date().getFullYear(); if (m < 1000 || m > 9999) {alert("年份值不在 1000 到 9999 之间!");return;} var n = m - 10; if (n < 1000) n = 1000; if (n + 26 > 9999) n = 9974; var s = "<select Author=meizz name=tmpSelectYear style='font-size: 12px' " s += "onblur='document.all.tmpSelectYearLayer.style.display=\"none\"' " s += "onchange='document.all.tmpSelectYearLayer.style.display=\"none\";" s += "meizzTheYear = this.value; meizzSetDay(meizzTheYear,meizzTheMonth)'>\r\n"; var selectInnerHTML = s; selectInnerHTML += "<option value='" + (n-10) + "'>" + "..." + "\r\n"; for (var i = n; i < n + 26; i++) { if (i == m) {selectInnerHTML += "<option value='" + i + "' selected>" + i + "年" + "\r\n";} else {selectInnerHTML += "<option value='" + i + "'>" + i + "年" + "\r\n";} } selectInnerHTML += "<option value='" + (n+20) + "'>" + "..." + "\r\n"; selectInnerHTML += ""; document.all.tmpSelectYearLayer.style.display=""; document.all.tmpSelectYearLayer.innerHTML = selectInnerHTML; document.all.tmpSelectYear.focus(); }  function tmpSelectMonthInnerHTML(strMonth) //月份的下拉框 { if (strMonth.match(/\D/)!=null){alert("月份输入参数不是数字!");return;} var m = (strMonth) ? strMonth : new Date().getMonth() + 1; var s = "<select Author=meizz name=tmpSelectMonth style='font-size: 12px' " s += "onblur='document.all.tmpSelectMonthLayer.style.display=\"none\"' " s += "onchange='document.all.tmpSelectMonthLayer.style.display=\"none\";" s += "meizzTheMonth = this.value; meizzSetDay(meizzTheYear,meizzTheMonth)'>\r\n"; var selectInnerHTML = s; for (var i = 1; i < 13; i++) { if (i == m) {selectInnerHTML += "<option value='"+i+"' selected>"+i+"月"+"\r\n";} else {selectInnerHTML += "<option value='"+i+"'>"+i+"月"+"\r\n";} } selectInnerHTML += ""; document.all.tmpSelectMonthLayer.style.display=""; document.all.tmpSelectMonthLayer.innerHTML = selectInnerHTML; document.all.tmpSelectMonth.focus(); }  function closeLayer() //这个层的关闭 { document.all.meizzDateLayer.style.display="none"; }  function document.onkeydown() { if (window.event.keyCode==27)document.all.meizzDateLayer.style.display="none"; }  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; }  function meizzPrevY() //往前翻 Year { if(meizzTheYear > 999 && meizzTheYear <10000){meizzTheYear--;} else{alert("年份超出范围(1000-9999)!");} meizzSetDay(meizzTheYear,meizzTheMonth); } function meizzNextY() //往后翻 Year { if(meizzTheYear > 999 && meizzTheYear <10000){meizzTheYear++;} else{alert("年份超出范围(1000-9999)!");} meizzSetDay(meizzTheYear,meizzTheMonth); } function meizzToday() //Today Button { meizzTheYear = new Date().getFullYear(); meizzTheMonth = new Date().getMonth()+1; meizzSetDay(meizzTheYear,meizzTheMonth); } 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); }  function meizzSetDay(yy,mm) //主要的写程序********** { meizzWriteHead(yy,mm); for (var i = 0; i < 37; i++){meizzWDay[i]=""}; //将显示框的内容全部清空 var day1 = 1,firstday = new Date(yy,mm-1,1).getDay(); //某月第一天的星期几 for (var i = firstday; day1 < GetMonthCount(yy,mm)+1; i++){meizzWDay[i]=day1;day1++;} for (var i = 0; i < 37; i++) { var da = eval("document.all.meizzDay"+i) //书写新的一个月的日期星期排列 if (meizzWDay[i]!="") { da.innerHTML = "<b>" + meizzWDay[i] + ""; da.style.backgroundColor = (yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ? "#FFD700" : "#ADD8E6"; da.style.cursor="hand" } else{da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"} } } function meizzDayClick(n) //点击显示框选取日期,主输入函数************* { var yy = meizzTheYear; var mm = meizzTheMonth; if (mm < 10){mm = "0" + mm;} if (outObject) { if (!n) {outObject.value=""; return;} if ( n < 10){n = "0" + n;} outObject.value= yy + "-" + mm + "-" + n ; //注:在这里你可以输出改成你想要的格式 closeLayer(); } else {closeLayer(); alert("您所要输出的控件对象并不存在!");} } meizzSetDay(meizzTheYear,meizzTheMonth) </script>
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template