先上截图：
事实上，上面如果换到下个月或者上个月，当前的选择依然会得到保存，并且显示如初。
这个批量选择日期，在有些场合，比如计划或者查询的时候可以用到。
首先声明：这是改编过来的一个多选日期插件，原来的是一个普通但很实用的日历控件，再次需要真诚感谢原作者。
设计了一个类,主要的思路是:(屏蔽选择即消失的代码，记住选中并着色的日期，根据日期控件区域绘制过程的当前数据显示此前记住的日期.)
function $2(id) { return document.getElementById(id); } function SelectDateCache() { this.Cache=[];//选中并着色的日期存储在此数组中 this.Add=function(sDate){ if(!this.Exist(sDate)) this.Cache.push(sDate); }; this.Clear=function(){ this.Cache.splice(0,this.Cache.length); }; this.Remove=function(sDate){ for(var i=0,l=this.Cache.length;i<l;i++) { if(this.Cache[i]==sDate) { this.Cache.splice(i,1); break; } } }; this.Exist=function(sDate){ for(var i=0,l=this.Cache.length;i<l;i++) { if(this.Cache[i]==sDate) { return true; } } return false; }; this.GetRelateControlIdByDate=function(sDate){ var sDay='',sMonth='',sYear=''; var sTemp=sDate.split('-'); if(sTemp[1].substr(0,1)=='0') { sMonth=sTemp[1].substr(1); } else { sMonth=sTemp[1]; } sMonth=(parseInt(sMonth+'')-1)+""; if(sTemp[2].substr(0,1)=='0') { sDay=sTemp[2].substr(1,1); } else { sDay=sTemp[2]; } sYear=sTemp[0]; var controlId="day-"+sDay+"-"+sMonth+"-"+sYear; return controlId; }; this.GetDateFromControlId=function(sControlId){ //day-16-1-2013 var sTemp=sControlId.split('-'); if(sTemp[1].length==1) sTemp[1]='0'+sTemp[1]; sTemp[2]=(parseInt(sTemp[2])+1)+""; if(sTemp[2].length==1) sTemp[2]='0'+sTemp[2]; return sTemp[3]+'-'+sTemp[2]+'-'+sTemp[1]; }; } var aSelectController=new SelectDateCache();
前端页面的部分代码：
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> <link type="text/css" rel="Stylesheet" href="/JS/Plugin/CalendarSelector/pricecalendar.css"/> <script type="text/javascript" src="/JS/Plugin/CalendarSelector/SelectController.js"></script> <script type="text/javascript" src="/JS/Plugin/CalendarSelector/calendarn.js"></script> <script type="text/javascript" src="/JS/Plugin/CalendarSelector/calendarFun.js"></script> <script type="text/javascript" src="/JS/Plugin/CalendarSelector/calendarCfg.js"></script> </head> <body> <form id="form1" runat="server"> <div> <div id="div_calendar" style="height:450px;"> <input style="150px;visibility:hidden" id="startDate" name="startDate" type="text" ondblclick="this.value=''" maxlength="10" readonly="readonly" value='<%=Request["startDate"]== null?"":Request.Params["startDate"] %>' /> </div> <br /> <div style="text-align:center"> <input type="button" onclick="ShowPriceCalendar(event);" value="打开"/> <input type="button" onclick="ClosePriceCalendar();" value="关闭"/> <br /> </div> </div> </form> <script type="text/javascript"> function ShowPriceCalendar(eventObj) { Calendar.display(document.getElementById('startDate'), new Date(), AddDay('D', 1, new Date()), undefined, 1, undefined, null, eventObj); } function ClosePriceCalendar() { Calendar.closeCalendar(); } function OnLoadFunction(eventObj) { ShowPriceCalendar(eventObj); } Calendar.ToActionOnClicked = function(sSelectedDate) { var cObj=$2(aSelectController.GetRelateControlIdByDate(sSelectedDate)); if (!aSelectController.Exist(sSelectedDate)) { cObj.style.backgroundColor = "#C0BBAF"; aSelectController.Add(sSelectedDate); } else { cObj.style.backgroundColor = ""; aSelectController.Remove(sSelectedDate); } }; </script> </body> </html>
另外上述引用的js,css文件我已经上传到园子里的文件中了，不过找了半天，我竟然有点不清楚如何把博客管理中文件中的资源通过某种方式显示在当前文档.
外面有点冷，感觉有些困了..