输入框日期选择控件

现在的位置: 首页 > 综合 > 正文

输入框日期选择控件

2013年08月13日 ⁄ 综合 ⁄ 共 8730字 ⁄ 字号小中大 ⁄ 评论关闭

<h4>输入框日期选择控件</h4>
<script type="text/javascript">
function HS_DateAdd(interval,number,date){
   number = parseInt(number);
   if (typeof(date)=="string"){var date = new Date(date.split("-")[0],date.split("-")[1],date.split("-")[2])}
   if (typeof(date)=="object"){var date = date}
   switch(interval){
   case "y":return new Date(date.getFullYear()+number,date.getMonth(),date.getDate()); break;
   case "m":return new Date(date.getFullYear(),date.getMonth()+number,checkDate(date.getFullYear(),date.getMonth()+number,date.getDate())); break;
   case "d":return new Date(date.getFullYear(),date.getMonth(),date.getDate()+number); break;
   case "w":return new Date(date.getFullYear(),date.getMonth(),7*number+date.getDate()); break;
   }
}
function checkDate(year,month,date){
   var enddate = ["31","28","31","30","31","30","31","31","30","31","30","31"];
   var returnDate = "";
   if (year%4==0){enddate[1]="29"}
   if (date>enddate[month]){returnDate = enddate[month]}else{returnDate = date}
   return returnDate;
}

   var now;
   if (typeof(arguments[0])=="string"){
       selectDate = arguments[0].split("-");
       var year = selectDate[0];
       var month = parseInt(selectDate[1])-1+"";
       var date = selectDate[2];
       now = new Date(year,month,date);
   }else if (typeof(arguments[0])=="object"){
       now = arguments[0];
   }
   var lastMonthEndDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+now.getMonth()+"-01").getDate();
   var lastMonthDate = WeekDay(now.getFullYear()+"-"+now.getMonth()+"-01");
   var thisMonthLastDate = HS_DateAdd("d","-1",now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-01");
   var thisMonthEndDate = thisMonthLastDate.getDate();
   var thisMonthEndDay = thisMonthLastDate.getDay();
   var todayObj = new Date();
   today = todayObj.getFullYear()+"-"+todayObj.getMonth()+"-"+todayObj.getDate();

   for (i=0; i<lastMonthDate; i++){ // Last Month's Date
       lis = "<li class='lastMonthDate'>"+lastMonthEndDate+"</li>" + lis;
       lastMonthEndDate--;
   }
   for (i=1; i<=thisMonthEndDate; i++){ // Current Month's Date

       if(today == now.getFullYear()+"-"+now.getMonth()+"-"+i){
           var todayString = now.getFullYear()+"-"+(parseInt(now.getMonth())+1).toString()+"-"+i;
           lis += "<li><a href=javascript:void(0) class='today' onclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";
       }else{
           lis += "<li><a href=javascript:void(0) onclick='_selectThisDay(this)' title='"+now.getFullYear()+"-"+(parseInt(now.getMonth())+1)+"-"+i+"'>"+i+"</a></li>";
       }

   }
   var j=1;
   for (i=thisMonthEndDay; i<6; i++){ // Next Month's Date
       lis += "<li class='nextMonthDate'>"+j+"</li>";
       j++;
   }
   lis += style;

   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>";
   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>";
   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>月";

   if (arguments.length>1){
       arguments[1].parentNode.parentNode.getElementsByTagName("ul")[1].innerHTML = lis;
       arguments[1].parentNode.innerHTML = CalenderTitle;

   }else{
       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>";
       return CalenderBox;
   }
}
function _selectThisDay(d){
   var boxObj = d.parentNode.parentNode.parentNode.parentNode.parentNode;
       boxObj.targetObj.value = d.title;
       boxObj.parentNode.removeChild(boxObj);
}
function closeCalender(d){
   var boxObj = d.parentNode.parentNode.parentNode;
       boxObj.parentNode.removeChild(boxObj);
}

function selectThisYear(obj){
HS_calender(obj.value+"-"+obj.parentNode.parentNode.getElementsByTagName("span")[1].getElementsByTagName("a")[0].innerHTML+"-1",obj.parentNode);
}

<body>

<h1>Date Picker</h1>
<h4 style="border-bottom:1px solid #ccc">ver:1.0</h4>
<table border="1" width="400" height="150">
   <tr>
       <td>文本文本文本</td>
       <td>点击输入框</td>
       <td>文本文本文本</td>
   </tr>
   <tr>
       <td>点击输入框</td>
       <td><input type="text" style="width:70px" onfocus="HS_setDate(this)">文本</td>
       <td>文本文本文本</td>
   </tr>
   <tr>
       <td>文本文本文本</td>
       <td>点击输入框</td>
       <td>文本<input type="text" style="width:70px" onfocus="HS_setDate(this)">文本</td>
   </tr>
</table>
<ul>
   <li>不需要其他框架类库</li>
   <li>支持ie6、firefox、opera</li>
   <li>点击年份与月份可以下拉选择</li>
</ul>

【上篇】Tuxedo Administrator学习笔记
【下篇】sqlserver中插入不重复的数据!

作者: yangyi2

该日志由 yangyi2 于11年前发表在综合分类下，最后更新于 2013年08月13日.
转载请注明: 输入框日期选择控件 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

输入框日期选择控件

作者: yangyi2

书签

最新文章New

本站推荐

返回首页