先上截圖：
事實上，上面如果換到下個月或者上個月，當前的選擇依然會得到保存，並且顯示如初。
這個批量選擇日期，在有些場合，比如計划或者查詢的時候可以用到。
首先聲明：這是改編過來的一個多選日期插件，原來的是一個普通但很實用的日歷控件，再次需要真誠感謝原作者。
設計了一個類,主要的思路是:(屏蔽選擇即消失的代碼，記住選中並着色的日期，根據日期控件區域繪制過程的當前數據顯示此前記住的日期.)
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="width: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文件我已經上傳到園子里的文件中了，不過找了半天，我竟然有點不清楚如何把博客管理中文件中的資源通過某種方式顯示在當前文檔.
外面有點冷，感覺有些困了..