HTML5中文网

[ 登陆论坛 注册 ] 设为首页 收藏本站 网站地图 RSS地图 
热搜： HTML5教程 HTML5游戏 html5实例 HTML5游戏教程 webGL CSS3教程 html5 滚动条 css实例 html5新闻 css3实例
你所在的位置：首 页 > HTML5特性 > 选择器 >

独立javascript日期选择器代码

发布时间：2011-09-26 作者：admin 来源：未知 我要评论

XML/HTML Code 复制内容到剪贴板 html head title 简洁漂亮的JS日期选择器代码 / title script type = text/javascript functionHS_DateAdd(interval,number,date){ number = parseInt (number); if(typeof(date)==string){var date = ne…

 

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <title>简洁漂亮的JS日期选择器代码</title>  
  4. <script type="text/javascript">  
  5. function HS_DateAdd(interval,number,date){  
  6.    number = parseInt(number);  
  7.    if (typeof(date)=="string"){var date = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2])}  
  8.    if (typeof(date)=="object"){var datedate = date}  
  9.    switch(interval){  
  10.    case "y":return new Date(date.getFullYear()+number,date.getMonth(),date.getDate()); break;  
  11.    case "m":return new Date(date.getFullYear(),date.getMonth()+number,checkDate(date.getFullYear(),date.getMonth()+number,date.getDate())); break;  
  12.    case "d":return new Date(date.getFullYear(),date.getMonth(),date.getDate()+number); break;  
  13.    case "w":return new Date(date.getFullYear(),date.getMonth(),7*number+date.getDate()); break;  
  14.    }  
  15. }  
  16. function checkDate(year,month,date){  
  17.    var enddate = ["31","28","31","30","31","30","31","31","30","31","30","31"];  
  18.    var returnDate = "";  
  19.    if (year%4==0){enddate[1]="29"}  
  20.    if (date>enddate[month]){returnDate = enddate[month]}else{returnDate = date}  
  21.    return returnDate;  
  22. }  
  23.   
  24. function WeekDay(date){  
  25.    var theDate;  
  26.    if (typeof(date)=="string"){theDate = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2]);}  
  27.    if (typeof(date)=="object"){theDate = date}  
  28.    return theDate.getDay();  
  29. }  
  30. function HS_calender(){  
  31.    var lis = "";  
  32.    var style = "";  
  33.    /* http://www.webdm.cn*/  
  34.    style +="<style type='text/css'>";  
  35.    style +=".calender { width:170px; height:auto; font-size:12px; margin-right:14px; background:url(calenderbg.gif) no-repeat right center #fff; border:1px solid #397EAE; padding:1px}";  
  36.    style +=".calender ul {list-style-type:none; margin:0; padding:0;}";  
  37.    style +=".calender .day { background-color:#EDF5FF; height:20px;}";  
  38.    style +=".calender .day li,.calender .date li{ float:left; width:14%; height:20px; line-height:20px; text-align:center}";  
  39.    style +=".calender li a { text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}";  
  40.    style +=".calender li a:hover { color:#f30; text-decoration:underline}";  
  41.    style +=".calender li a.hasArticle {font-weight:bold; color:#f60 !important}";  
  42.    style +=".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}";  
  43.    style +=".selectThisYear a, .selectThisMonth a{text-decoration:none; margin:0 2px; color:#000; font-weight:bold}";  
  44.    style +=".calender .LastMonth, .calender .NextMonth{ text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}";  
  45.    style +=".calender .LastMonth { float:left;}";  
  46.    style +=".calender .NextMonth { float:right;}";  
  47.    style +=".calenderBody {clear:both}";  
  48.    style +=".calenderTitle {text-align:center;height:20px; line-height:20px; clear:both}";  
  49.    style +=".today { background-color:#ffffaa;border:1px solid #f60; padding:2px}";  
  50.    style +=".today a { color:#f30; }";  
  51.    style +=".calenderBottom {clear:both; border-top:1px solid #ddd; padding: 3px 0; text-align:left}";  
  52.    style +=".calenderBottom a {text-decoration:none; margin:2px !important; font-weight:bold; color:#000}";  
  53.    style +=".calenderBottom a.closeCalender{float:right}";  
  54.    style +=".closeCalenderBox {float:right; border:1px solid #000; background:#fff; font-size:9px; width:11px; height:11px; line-height:11px; text-align:center;overflow:hidden; font-weight:normal !important}";  
  55.    style +="</style>";  
  56.   
  57.    var now;  
  58.    if (typeof(arguments[0])=="string"){  
  59.       selectDate = arguments[0].split("-");  
  60.       var year = selectDate[0];  
  61.       var month = parseInt(selectDate[1])-1+"";  
  62.       var date = selectDate[2];  
  63.       now = new Date(year,month,date);  
  64.    }else if (typeof(arguments[0])=="object"){  
  65.       now = arguments[0];  
  66.    }  
  67.    var lastMonthEndDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+now.getMonth()+"-01").getDate();  
  68.    var lastMonthDate = WeekDay(now.getFullYear()+"-"+now.getMonth()+"-01");  
  69.    var thisMonthLastDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-01");  
  70.    var thisMonthEndDate = thisMonthLastDate.getDate();  
  71.    var thisMonthEndDay = thisMonthLastDate.getDay();  
  72.    var todayObj = new Date();  
  73.    today = todayObj.getFullYear()+"-"+todayObj.getMonth()+"-"+todayObj.getDate();  
  74.      
  75.    for (i=0; i<lastMonthDate; i++){  // Last Month's Date  
  76.       lis = "<li class='lastMonthDate'>"+lastMonthEndDate+"</li>" + lis;  
  77.       lastMonthEndDate--;  
  78.    }  
  79.    for (i=1; i<=thisMonthEndDate; i++){ // Current Month's Date  
  80.   
  81.       if(today == now.getFullYear()+"-"+now.getMonth()+"-"+i){  
  82.          var todayString = now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-"+i;  
  83.          lis += "<li><a href=javascript:void(0) class='today' onclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";  
  84.       }else{  
  85.          lis += "<li><a href=javascript:void(0) onclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";  
  86.       }  
  87.         
  88.    }  
  89.    var j=1;  
  90.    for (i=thisMonthEndDay; i<6; i++){  // Next Month's Date  
  91.       lis += "<li class='nextMonthDate'>"+j+"</li>";  
  92.       j++;  
  93.    }  
  94.    lis += style;  
  95.   
  96.    var CalenderTitle = "<a href='javascript:void(0)' class='NextMonth' onclick=HS_calender(HS_DateAdd('m',1,'"+now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+"'),this) title='Next Month'>»</a>";  
  97.    CalenderTitle += "<a href='javascript:void(0)' class='LastMonth' onclick=HS_calender(HS_DateAdd('m',-1,'"+now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+"'),this) title='Previous Month'>«</a>";  
  98.    CalenderTitle += "<span class='selectThisYear'><a href='javascript:void(0)' onclick='CalenderselectYear(this)' title='Click here to select other year' >"+now.getFullYear()+"</a></span>年<span class='selectThisMonth'><a href='javascript:void(0)' onclick='CalenderselectMonth(this)' title='Click here to select other month'>"+(parseInt(now.getMonth())+1).toString()+"</a></span>月";   
  99.   
  100.    if (arguments.length>1){  
  101.       arguments[1].parentNode.parentNode.getElementsByTagName("ul")[1].innerHTML = lis;  
  102.       arguments[1].parentNode.innerHTML = CalenderTitle;  
  103.   
  104.    }else{  
  105.       var CalenderBox = style+"<div class='calender'><div class='calenderTitle'>"+CalenderTitle+"</div><div class='calenderBody'><ul class='day'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class='date' id='thisMonthDate'>"+lis+"</ul></div><div class='calenderBottom'><a href='javascript:void(0)' class='closeCalender' onclick='closeCalender(this)'>×</a><span><span><a href=javascript:void(0) onclick='_selectThisDay(this)' title='"+todayString+"'>Today</a></span></span></div></div>";  
  106.       return CalenderBox;  
  107.    }  
  108. }  
  109. function _selectThisDay(d){  
  110.    var boxObj = d.parentNode.parentNode.parentNode.parentNode.parentNode;  
  111.       boxObj.targetObj.value = d.title;  
  112.       boxObj.parentNode.removeChild(boxObj);  
  113. }  
  114. function closeCalender(d){  
  115.    var boxObj = d.parentNode.parentNode.parentNode;  
  116.       boxObj.parentNode.removeChild(boxObj);  
  117. }  
  118.   
  119. function CalenderselectYear(obj){  
  120.       var opt = "";  
  121.       var thisYear = obj.innerHTML;  
  122.       for (i=1970; i<=2020; i++){  
  123.          if (i==thisYear){  
  124.             opt += "<option value="+i+" selected>"+i+"</option>";  
  125.          }else{  
  126.             opt += "<option value="+i+">"+i+"</option>";  
  127.          }  
  128.       }  
  129.       opt = "<select onblur='selectThisYear(this)' onchange='selectThisYear(this)' style='font-size:11px'>"+opt+"</select>";  
  130.       obj.parentNode.innerHTML = opt;  
  131. }  
  132.   
  133. function selectThisYear(obj){  
  134.    HS_calender(obj.value+"-"+obj.parentNode.parentNode.getElementsByTagName("span")[1].getElementsByTagName("a")[0].innerHTML+"-1",obj.parentNode);  
  135. }  
  136.   
  137. function CalenderselectMonth(obj){  
  138.       var opt = "";  
  139.       var thisMonth = obj.innerHTML;  
  140.       for (i=1; i<=12; i++){  
  141.          if (i==thisMonth){  
  142.             opt += "<option value="+i+" selected>"+i+"</option>";  
  143.          }else{  
  144.             opt += "<option value="+i+">"+i+"</option>";  
  145.          }  
  146.       }  
  147.       opt = "<select onblur='selectThisMonth(this)' onchange='selectThisMonth(this)' style='font-size:11px'>"+opt+"</select>";  
  148.       obj.parentNode.innerHTML = opt;  
  149. }  
  150. function selectThisMonth(obj){  
  151.    HS_calender(obj.parentNode.parentNode.getElementsByTagName("span")[0].getElementsByTagName("a")[0].innerHTML+"-"+obj.value+"-1",obj.parentNode);  
  152. }  
  153. function HS_setDate(inputObj){  
  154.    var calenderObj = document.createElement("span");  
  155.    calenderObj.innerHTML = HS_calender(new Date());  
  156.    calenderObj.style.position = "absolute";  
  157.    calenderObj.targetObj = inputObj;  
  158.    inputObj.parentNode.insertBefore(calenderObj,inputObj.nextSibling);  
  159. }  
  160.   </script>  
  161. <style>  
  162.   body {font-size:12px}  
  163.   td {text-align:center}  
  164.   h1 {font-size:26px;}  
  165.   h4 {font-size:16px;}  
  166.   em {color:#999; margin:0 10px; font-size:11px; display:block}  
  167.   </style>  
  168. </head>  
  169. <body>  
  170. <h1>Date Picker Demo By Webdm.CN</h1>  
  171. <h4 style="border-bottom:1px solid #ccc">ver:1.0</h4>  
  172. <table border="1" width="400" height="150">  
  173.    <tr>  
  174.   
  175.       <td>这是示例文字</td>  
  176.       <td>示例输入框</td>  
  177.       <td>文本文本文本</td>  
  178.    </tr>  
  179.    <tr>  
  180.       <td>示例输入框</td>  
  181.       <td><input type="text" style="width:70px" onfocus="HS_setDate(this)">文本</td>  
  182.   
  183.       <td>这里是你的文字</td>  
  184.    </tr>  
  185.    <tr>  
  186.       <td>一段文字</td>  
  187.       <td>示例输入框</td>  
  188.       <td>文本<input type="text" style="width:70px" onfocus="HS_setDate(this)">文本</td>  
  189.   
  190.    </tr>  
  191. </table>  
  192. <ul>  
  193.    <li>它不需要其他框架类支持</li>  
  194.    <li>支持多种浏览器</li>  
  195.    <li>点击年份、月份可下拉选择</li>  
  196. </ul>  
  197. </body>  
  198. </html>  

 

你可能喜欢阅读以下文章

【责任编辑：admin】

>
数据统计中！！

上一篇：CSS3选择器，定位HTML5
下一篇：没有了
返回选择器

编辑推荐文章

独立javascript日期选择器代码

独立javascript日期选择器代码
XML/HTML Code 复制内容到剪贴板 html head title 简洁漂亮的JS日期选择器代码 / title script type = text/javas...

网友评论TOP10

查看所有评论

我要评论请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

验证码: 点击我更换图片

更多相关文章

更多推荐文章

栏目热门

热门标签：　html5 　canvas 　webgl 　Html5下载 　video 　开发工具 　css3 　工具 　视频 　手机