日期选择器

从别处找的比较简单记录一下以备不时之需

  1 (function(){
  2     var d=document,
  3         w=window,
  4         isIE=w.navigator.appVersion.indexOf("MSIE")>-1,
  5         now=new Date(),
  6         nowM=now.getMonth();
  7         nowY=now.getFullYear();
  8         date=null,
  9         ids=null,
 10         oInput=null;
 11     document.write('<iframe frameborder=0 style="display:none;position:absolute;" width="200" height="215" scrolling="no" name="sangcalender" id="sangcalender"></iframe>');
 12     var f=window.frames['sangcalender'];
 13     var ff=d.getElementById('sangcalender');
 14     var fd=f.document;
 15     fd.open();
 16     fd.write('<!DOCTYPE html><html><head><style type="text/css">#yearL, #monthL, #monthR, #yearR, #hoursL, #hoursR, #minL, #minR, #y, #m, #h, #i, #s{cursor:pointer;}.calenderClose a{display:block;13px;line-height:13px;border:1px solid #cccccc;background-color:#eeeeee;color:#666; text-decoration:none}.calenderClose a:hover{color:red}td{text-align:center}#calenderDay{cursor:pointer}body{font-size:12px;padding:0;margin:0}.col666{color:#999}.bg9ebdd6{background-color:#9ebdd6}</style></head><body onselectstart="return false" style="-moz-user-select:none" oncontextmenu="return false">')
 17     fd.write('<table width="100%" border="0" bgcolor="#CCCCCC" cellspacing="1" cellpadding="0">'+
 18              '<tr><td><table border="0" cellspacing="0" bgcolor="#6699FF" cellpadding="0" width="100%">'+
 19              '<tr><td width="20" height="25" align="center" id="yearL" title="上一年">&lt;&lt;</td>'+
 20              '<td width="12" align="center" id="monthL" title="上一月">&lt;</td><td align="center">'+
 21              '<span id="y" title="点击选择年份"></span>年<span id="m" title="点击选择月份"></span>月</td>'+
 22              '<td width="12" align="center" id="monthR" title="下一月">&gt;</td>'+
 23              '<td width="20" align="center" id="yearR" title="下一年">&gt;&gt;</td></tr></table></td></tr>'+
 24              '<tr bgcolor="#FFFFFF"><td><table width="100%" border="0" bgcolor="#9999FF" cellspacing="1" cellpadding="0">'+
 25              '<tr bgcolor="#CCCCFF" height="18"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table></td></tr>'+
 26              '<tr bgcolor="#FFFFFF"><td><div id="calenderDay"></div></td></tr>'+
 27              '<tr><td><table border="0" bgcolor="#eeeeee" cellpadding="0" cellspacing="0" width="100%">'+
 28              '<tr><td align="center" height="20" id="hoursL" title="时减少">&lt;&lt;</td>'+
 29              '<td align="center" id="minL" title="分减少">&lt;</td>'+
 30              '<td align="center"><span id="h" title="点击选择小时"></span>:<span id="i" title="点击选择分"></span>:<span id="s" title="点击选择秒"></span></td>'+
 31              '<td align="center" id="minR" title="分增加">&gt;</td><td align="center" id="hoursR" title="时增加">&gt;&gt;</td></tr>'+
 32              '</table></td></tr></table>');
 33     fd.write('</body></html>');
 34     fd.close();
 35 
 36     //获取框架里的元素  gids.call(obj,id)
 37     function gids(idArr){
 38         var oId=[];
 39         for(var i=0,len=idArr.length;i<len;i++){
 40             oId[idArr[i]]=this.getElementById(idArr[i]);
 41         }
 42         return oId;
 43     }
 44     //需要添加事件的元素的集合
 45     var idsArr=['yearL','yearR','y','m','monthL','monthR','hoursL','hoursR','minL','minR','calenderClose','calenderDay','h','i','s'];
 46     if(!ids){ids=gids.call(fd,idsArr)};
 47     //格式化日历控件
 48     function formatDay(timestr){
 49         var t=/(d+)-(d+)-(d+)s*(d*):?(d*):?(d*)/.exec(timestr);
 50         var da=null;
 51         var dn=getdate(now);
 52         if(t){
 53             da=new Date(t[1],t[2]-1,1,t[4],t[5],t[6]);
 54         }else{
 55             da=new Date(dn['y'],dn['m'],1,dn['h'],dn['i'],dn['s']);
 56         }
 57         date=getdate(da);
 58         var mon=[31,date['y']%4==0?29:28,31,30,31,30,31,31,30,31,30,31];
 59         var str="",day=1;
 60         str+='<table width="100%" border="0" bgcolor="#cecece" cellspacing="1" cellpadding="0">';
 61         for(var md=mon[date['m']-1],wd=md-date['w']+1,n=0;n<6;n++){
 62             str+='<tr bgcolor="#ffffff" height="23">';
 63             for(var nn=0;nn<7;nn++){
 64                 if(wd<=md){
 65                     str+='<td class="col666">'+wd+'</td>';
 66                     wd++;
 67                 }else {
 68                     if(day<=mon[date['m']]){
 69                         if(day==dn['d'] && nowM==now.getMonth()&&nowY==now.getFullYear()){
 70                             str+='<td class="bg9ebdd6">'+(day++)+'</td>';
 71                         }else{
 72                             str+='<td>'+(day++)+'</td>';
 73                         }
 74                         var day2=1;
 75                     }else{
 76                         str+='<td class="col666">'+(day2++)+'</td>';
 77                     }
 78                 }
 79             }
 80             str+='</tr>';
 81         }
 82         str+='</table>';
 83         ids['calenderDay'].innerHTML=str;
 84         var dates=[date['y'],fillzero(date['m']+1),fillzero(date['h']),fillzero(date['i']),fillzero(date['s'])];
 85         each.call([ids['y'],ids['m'],ids['h'],ids['i'],ids['s']],function(o,i){o.innerHTML=dates[i]});
 86         each.call(ids['calenderDay'].getElementsByTagName("td"),function(o,i){
 87             addEvent(o,"mouseover",function(e){
 88                 o.style.backgroundColor="#9ebdd6";
 89             })
 90             addEvent(o,"mouseout",function(e){
 91                 o.style.backgroundColor="";
 92             })
 93             addEvent(o,"click",function(e){
 94                 if(o.className=="col666"){return}
 95                 oInput.value=ids['y'].innerHTML+"-"+ids['m'].innerHTML+"-"+ fillzero(o.innerHTML) 
 96                             +" "+ids['h'].innerHTML+":"+ids['i'].innerHTML+":"+ids['s'].innerHTML;
 97                 hide();
 98             })
 99         })
100     }
101     
102     //为按钮添加事件
103     var handlers=[yL,yR,mL,mR,hL,hR,iL,iR];
104     each.call([ids['yearL'],ids['yearR'],ids['monthL'],ids['monthR'],ids['hoursL'],ids['hoursR'],ids['minL'],ids['minR']],function(o,i){
105         addEvent(o,"click",handlers[i]);
106     })
107     
108     var clicks=[yClick,mClick,hClick,iClick,sClick];
109     each.call([ids['y'],ids['m'],ids['h'],ids['i'],ids['s']],function(o,i){
110         addEvent(o,"click",clicks[i]);
111     })
112     
113     //获取元素位置
114     function getPos(e){
115         var x,y,e=typeof e=="string"?d.getElementById(e):e,p=[];
116         x=e.offsetLeft;
117         y=e.offsetTop;
118         while(e=e.offsetParent){
119             x+=e.offsetLeft;
120             y+=e.offsetTop;
121         }
122         p['x']=x;p['y']=y;
123         return p;
124     }
125     
126     //上一年
127     function yL(){
128         now.setFullYear(date['y']-1);
129         formatDay();
130     }
131     
132     //下一年
133     function yR(){
134         now.setFullYear(date['y']+1);
135         formatDay();
136     }
137     
138     //上一月
139     function mL(){
140         now.setMonth(date['m']-1);
141         formatDay();
142     }
143     
144     //下一月
145     function mR(){
146         now.setMonth(date['m']+1);
147         formatDay();
148     }
149     
150     //时增加
151     function hR(){
152         now.setHours(date['h']+1);
153         formatDay();
154     }
155     
156     //时减少 
157     function hL(){
158         now.setHours(date['h']-1);
159         formatDay();
160     }
161     
162     //分增加
163     function iR(){
164         now.setMinutes(date['i']+1);
165         formatDay();
166     }
167     
168     //分减少
169     function iL(){
170         now.setMinutes(date['i']-1);
171         formatDay();
172     }
173     
174     //为SELECT添加事件
175     function addEventForSelect(type){
176         function changeInner(){
177             ids[type].innerHTML=fillzero(oSelect.value);
178             now.setFullYear(ids['y'].innerHTML);
179             now.setMonth(Number(ids['m'].innerHTML)-1);
180             now.setHours(ids['h'].innerHTML);
181             now.setMinutes(ids['i'].innerHTML);
182             now.setSeconds(ids['s'].innerHTML);
183             formatDay();
184         }
185         var oSelect=gids.call(fd,['calenderSelect'])['calenderSelect'];
186         oSelect.focus();
187         addEvent(oSelect,'change',changeInner);
188         addEvent(oSelect,"blur",changeInner);
189     }
190     
191     //生成option选项
192     function createOption(type,v){
193         var str='',str2='',i=0,i2=0;
194         function create(i,i2){
195             while(i>=i2){
196                 if(v==i){
197                     str2+='<option value="'+i+'" selected>'+i+'</option>';
198                 }else{
199                     str2+='<option value="'+i+'">'+i+'</option>';
200                 }
201                 i--;
202             }
203             str+=str2+'</select>';
204             ids[type].innerHTML=str;
205             addEventForSelect(type);
206         }
207         str+='<select id="calenderSelect">';
208         if(type=="y"){
209             i=2011;i2=1990;
210             create(i,i2);
211             return;
212         }
213         if(type=="m"){
214             i=1;i2=12;
215         }
216         if(type=="h"){
217            i=00;i2=23;
218         }
219         if(type=="i"){
220             i=00;i2=59;
221         }
222         if(type=="s"){
223             i=00;i2=59;
224         }
225         create(i2,i);
226     }
227     
228     //年鼠标点击
229     function yClick(e){
230         if(getTarget(e).tagName.toLowerCase()=="span"){
231             createOption("y",ids['y'].innerHTML);
232         }
233     }
234     
235     //月鼠标点击
236     function mClick(e){
237         if(getTarget(e).tagName.toLowerCase()=="span"){
238             createOption("m",ids['m'].innerHTML);
239         }
240     }
241     
242     //时鼠标点击
243     function hClick(e){
244         if(getTarget(e).tagName.toLowerCase()=="span"){
245             createOption("h",ids['h'].innerHTML);
246         }
247     }
248     
249     //分鼠标点击
250     function iClick(e){
251         if(getTarget(e).tagName.toLowerCase()=="span"){
252             createOption("i",ids['i'].innerHTML);
253         }
254     }
255     
256     //秒鼠标点击
257     function sClick(e){
258         if(getTarget(e).tagName.toLowerCase()=="span"){
259             createOption("s",ids['s'].innerHTML);
260         }
261     }
262     
263     //each方法
264     function each(handler){
265         var o=null;
266         for(var i=0,len=this.length;i<len;i++){
267             o=typeof this[i]=="string"?fd.getElementById(this[i]):this[i];
268             handler(o,i);
269         }
270     }
271     
272     //如果日期为一位数，则在前面补零
273     function fillzero(str){
274         var str=typeof str=="string"?str:str.toString();
275         if(str.length==1){
276             str="0"+str;
277         }
278         return str;
279     }
280     
281     //获取时间
282     function getdate(da){
283         var date=[];
284         date['y']=da.getFullYear();
285         date['m']=da.getMonth();
286         date['d']=da.getDate();
287         date['w']=da.getDay();
288         date['h']=da.getHours();
289         date['i']=da.getMinutes();
290         date['s']=da.getSeconds();
291         return date;
292     }
293     
294     //阻止默认事件
295     function preventDefault(e){
296         var e=e||window.event;
297         if(e.preventDefault){
298             e.preventDefault();
299         }else{
300             e.returnValue=false;
301         }
302     }
303     
304     function getTarget(e){
305         var e=e||window.event;
306         return e.srcElement||e.target;
307     }
308     
309     //显示日历控件
310     function show(o){
311         var s=o.value;
312         var p=getPos(o);
313         if(s){
314             formatDay(s);
315         }else{
316             now=new Date();
317             formatDay();
318         }
319         ff.style.left=p['x']+"px";
320         ff.style.top=p['y'] + o.offsetHeight + "px";
321         ff.style.display="block";
322     }
323     
324     //隐藏日历控件
325     function hide(){
326         ff.style.display="none";
327     }
328     
329     //添加事件
330     function addEvent(element,event,handler){
331         var element=typeof element=="string"?d.getElementById(element):element;
332         if(element.addEventListener){
333             element.addEventListener(event,handler,false)
334         }else if(element.attachEvent){
335             element.attachEvent("on"+event,handler);
336         }else{
337             element["on"+event]=handler;
338         }
339     }
340     
341     //获取要实现控件的表单
342     function getObj(className){
343         var o=d.getElementsByTagName('*'),oArr=[];
344         for(var i=0,len=o.length;i<len;i++){
345             if(o[i].className==className){
346                 oArr.push(o[i])
347             }
348         }
349         return oArr;
350     }
351     
352     each.call(getObj("sang_Calender"),function(o,i){
353         addEvent(o,"click",function(e){preventDefault(e);oInput=o,show(o);ff.focus()})
354     })
355     
356     //var iframeObj=isIE?ff:f;
357     addEvent(isIE?ff:f,"blur",function(e){hide()})
358 })()

datetime.js

主页代码：

<!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=utf-8" />
<title>原生JS实现简洁的时间日期控件代码 - 素材家园</title>
</head>
<body>
<center>
<input type="text" class="sang_Calender" />
</center>
<script type="text/javascript" src="datetime.js"></script>
</body>
</html>

　　效果如图：