JS日期控件 - 爱码网

使用方法：给需要使用的input添加类名：M_time

css部分：

 1 *{ margin:0; padding:0}
 2 #M_time{position:absolute;top:0;left:0; background:#fff;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);opacity:0.9;-moz-opacity:0.9;-webkit-opacity:0.9; z-index:1000}
 3 #M_table{ width:200px; table-layout:fixed; font-size:12px; border:#000 solid 1px; }
 4 #M_table tr td{ padding:5px}
 5 #M_table tr td{ text-align:center; vertical-align:middle; cursor:pointer}
 6 #M_table #M_thead tr td{}
 7 #M_table #M_tbody .e3e3e3{ color:#e3e3e3}
 8 #M_table #M_yerclick{position:relative;top:0; left:0;}
 9 #M_table .M_yer_li,#M_table .M_yer_li li{ list-style:none; text-indent:0;}
10 #M_table .M_yer_li{ display:none; position:absolute;top:15px;left:50%; width:80px;  background:#CCC; margin-left:-40px; border:#999 solid 1px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);opacity:0.9;-moz-opacity:0.9;-webkit-opacity:0.9;}
11 #M_table .M_yer_li li{ font-size:14px; letter-spacing:0.1em;}
12 #M_table .M_yer_li li.lihover{ background:#333}
13 #M_table tr td.limouseover{ color:#F00}

javascript部分

  1 var M_obj ={
  2     name:"",
  3     top:0,
  4     left:0
  5            }
  6 var input = document.getElementsByTagName("input");
  7     for(var i = 0 ; i < input.length ; i++)
  8     {
  9         if(input.item(i).className=="M_time")
 10         {
 11             
 12             input.item(i).onclick=M_create;
 13         }
 14     }
 15 
 16 var date = new Date();
 17 var curentyers = new Date();
 18 var ie = /*@cc_on!@*/!1;
 19 function M_create(event)
 20 {
 21     var th = this;
 22     var event = event? event:window.event;
 23     
 24     
 25     
 26     if(document.getElementById("M_time"))
 27     {
 28        document.body.removeChild(document.getElementById("M_time"));
 29       
 30     }
 31     var set_yer,set_mon;
 32     if(arguments.length>1)
 33     {
 34     set_yer = arguments[0];
 35     set_mon = arguments[1];
 36     date = new Date(set_yer,set_mon);    
 37     }
 38     //初始化
 39     var datahtml =\'<table id="M_table" border="0"><thead id="M_thead"><tr><td><a id="left">&lt;&lt;</a></td><td colspan="5" id="fullyer"><div id="M_yerclick"><span id="M_yy">2012</span>年<span id="M_mm">1</span>月</div></td><td id="right">&gt;&gt;</td></tr><tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></thead><tbody id="M_tbody"><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>\';
 40     var yer = date.getFullYear();
 41     var mon = date.getMonth();
 42     var week = date.getDay();
 43     var day = date.getDate();
 44     var current = (new Date(yer,mon,1)).getDay();
 45     var div = document.createElement("div");
 46         div.id = "M_time";
 47         div.innerHTML = datahtml;
 48         div.style.top = M_obj.top+"px";
 49         div.style.left = M_obj.left+"px";
 50         div.onmouseout = Mtimemouseover;
 51         document.body.appendChild(div);
 52         document.getElementById("M_yy").innerHTML = yer;
 53         document.getElementById("M_mm").innerHTML = mon+1;
 54         
 55     if(th.nodeName&&(th.nodeName).toLowerCase()=="input")
 56     {
 57        M_obj.name = th.name;
 58        var parent = th.offsetParent;
 59        var num = th.offsetTop+th.offsetHeight;
 60        var left = th.offsetLeft;
 61               while(parent)
 62            {
 63                num+= parent.offsetTop;

 64                left+=parent.offsetLeft;
 65                parent = parent.offsetParent;
 66            }
 67            div.style.top=num+"px";
 68            div.style.left = left+"px";
 69            M_obj.top = num;
 70            M_obj.left = left;
 71          
 72     }
 73         
 74     var run = (yer%4==0)? 29:28;
 75     var cuday = runyue(mon+1);
 76     var prive = runyue(mon+1);
 77     var jl = 1;
 78     var yerul = document.createElement("ol");
 79         yerul.className = "M_yer_li";
 80         yerul.id = "M_yer_li";
 81         yerul.onmouseout = yerulmouseout;
 82         document.getElementById("M_yerclick").appendChild(yerul);
 83         document.getElementById("M_yerclick").onclick = showol;
 84         for(var  o= 0 ; o < 20 ; o ++)
 85         {
 86             var li = document.createElement("li");
 87                 li.innerHTML = curentyers.getFullYear() - o;
 88                 li.onclick = clickyerli;
 89                 li.onmouseover = mouseoverli;
 90                 yerul.appendChild(li);
 91         }
 92         
 93         document.getElementById("left").onclick = leftclick;
 94         document.getElementById("right").onclick = rightclick;
 95     
 96     
 97     var M_tbody = document.getElementById("M_tbody").getElementsByTagName("td");
 98         
 99        for(var i = -current ; i < M_tbody.length-current ; i ++)
100        {
101            
102            M_tbody.item(i+current).onmouseover = li_mouseover;
103            M_tbody.item(i+current).onclick = li_click;
104            M_tbody.item(i+current).alt = M_obj.name;
105            
106           
107            if(i+current<cuday)
108            {
109               if(i+current<current)
110               { 
111               
112               M_tbody.item(i+current).innerHTML = prive - Math.abs(i)+1;
113               M_tbody.item(i+current).className = "e3e3e3";
114               
115               }
116                
117                M_tbody.item(i+current+current).innerHTML = i+current+1;
118                
119             }else{
120                 if( M_tbody.item(i+current+current))
121                 {
122                  M_tbody.item(i+current+current).innerHTML = jl;
123                  M_tbody.item(i+current+current).className="e3e3e3";
124                  jl++;
125                 }
126                  }
127         
128             
129            
130         }
131         
132     
133     M_obj.jl++;
134           
135         
136 }
137 
138 //判断月份
139 function runyue(o)
140 {
141     var dd;
142     switch(o)
143     {
144         case 1:
145         case 3:
146         case 5:
147         case 7:
148         case 8:
149         case 10:
150         case 12:dd = 31;break;
151         case 2:dd=28;break;
152         default:dd=30;
153     }
154     return dd
155     
156 }
157 
158 //年份下拉显示
159 function showol(event)
160 {
161 
162     var event = event? event:window.event;
163     if(ie)
164     {
165         if((event.srcElement.nodeName).toLowerCase() == "li")return;
166     }else{
167         if((event.target.nodeName).toLowerCase() == "li")return;
168          }
169     document.getElementById("M_yer_li").style.display="block";
170 }
171 
172  //年份下拉点击
173 function clickyerli()
174 {
175     document.getElementById("M_yy").innerHTML = this.innerHTML;
176     
177     hideol();
178     M_create(parseInt(this.innerHTML),0);//设置年份
179     
180 }
181 
182 //年份下拉鼠标掠过
183 function mouseoverli()
184 {
185     var ol = document.getElementById("M_yer_li");
186         for(var i = 0 ; i < ol.getElementsByTagName("li").length ; i++)
187         {
188             ol.getElementsByTagName("li").item(i).className="";
189         }
190     this.className="lihover";
191     
192 }
193 
194 //年份下拉鼠标掠出
195 function yerulmouseout(event)
196 {
197     var event = event? event:window.event;
198     var th = this;
199     if(ie)
200     {
201         if(!th.contains(event.toElement))
202         { 
203                 hideol();
204         
205         }
206         
207     }else{
208         if(th.compareDocumentPosition(event.relatedTarget)&16)
209         {
210            return;
211            
212         }else
213         {
214             hideol();
215         }
216          }
217     
218 }
219 
220 //清空年份下拉
221 function hideol()
222 {
223         //th.style.display="none";
224         
225                     var ol = document.getElementById("M_yer_li");
226                     for(var i = 0 ; i < ol.getElementsByTagName("li").length ; i++)
227                     {
228                         ol.getElementsByTagName("li").item(i).className="";
229                     }
230                     ol.style.display="none";
231 }
232 
233 //月左
234 function leftclick()
235 {
236   var js = document.getElementById("M_yer_li").getElementsByTagName("li")[document.getElementById("M_yer_li").getElementsByTagName("li").length-1];
237   var num = parseInt(js.innerHTML);
238   var curent = document.getElementById("M_mm");
239   var cu_mm = parseInt(curent.innerHTML);
240   var cu_y = document.getElementById("M_yy");
241   var cu_yy = parseInt(cu_y.innerHTML);
242    
243     if(cu_yy==num&&cu_mm ==1)
244       {
245         
246           return
247       }
248         
249         cu_mm --;
250       if(cu_mm <1)
251       { 
252       cu_mm=12;
253       curent.innerHTML = 12;
254       cu_yy--
255       
256       cu_y.innerHTML = cu_yy;
257       }
258       curent.innerHTML = cu_mm;
259       
260   M_create(parseInt(cu_yy),parseInt(cu_mm)-1);
261        
262 }
263 
264 //月右
265 function rightclick()
266 {
267     
268   var curent = document.getElementById("M_mm");
269   var cu_mm = parseInt(curent.innerHTML);
270   var cu_y = document.getElementById("M_yy");
271   var cu_yy = parseInt(cu_y.innerHTML);
272   var yer = date.getFullYear();
273   if(cu_yy==curentyers.getFullYear()&&cu_mm==12) return;
274   cu_mm++;
275   if(cu_mm>12)
276   {
277       cu_mm = 1;
278       cu_yy++;
279       cu_y.innerHTML = cu_yy;
280   }
281   curent.innerHTML = cu_mm;
282   
283  M_create(parseInt(cu_yy),parseInt(cu_mm)-1);
284     
285 }
286 
287 //td鼠标略入
288 function li_mouseover()
289 {
290     clearclass();
291     var th = this;
292     if(th.className=="e3e3e3")
293     {}else{
294         th.className="limouseover";
295           }
296     
297     
298     
299 }
300 //td清空
301 function clearclass()
302 {
303     var tdd = document.getElementById("M_tbody").getElementsByTagName("td");
304     for(var d = 0 ; d < tdd.length; d ++)
305     {
306         
307             if(tdd.item(d).className=="e3e3e3")
308             {
309               
310             }else{
311                 tdd.item(d).className="";
312                 
313                  }
314         
315     }
316 }
317 
318 //添加鼠标掠过外部div
319 function Mtimemouseover(event)
320 {
321     var event = event? event:window.event;
322     var th = this;
323     if(ie)
324     {
325         if(!th.contains(event.toElement))
326         {
327              document.body.removeChild(document.getElementById("M_time"));
328         };
329     }else{
330         if(th.compareDocumentPosition(event.relatedTarget)&16)
331         {
332         return     
333         }else{
334             document.body.removeChild(document.getElementById("M_time"));
335              };
336          }
337 }
338 //添加div内部table td点击
339 function li_click()
340 {
341     var th = this;
342     
343     if(this.className=="e3e3e3")
344     {
345         return;
346     }else{
347          var curent = document.getElementById("M_mm");
348           var cu_mm = parseInt(curent.innerHTML);
349           var cu_y = document.getElementById("M_yy");
350            var cu_yy = parseInt(cu_y.innerHTML);
351          var num = parseInt(th.innerHTML);
352          
353          var input = document.getElementsByTagName("input");
354          for(var i = 0 ; i<input.length ; i++)
355          {
356              
357                  if(input.item(i).name==th.alt)
358                  {
359                      input.item(i).value = cu_yy+"-"+cu_mm+"-"+num;
360                       document.body.removeChild(document.getElementById("M_time"));
361                  }
362                 // input.item(i).value= cu_yy+"-"+cu_mm+"-"+num;
363              
364          }
365         
366          }
367 }

html部分演示