最近改造的一款可多选的日历插件，已通过兼容性测试

先上截图：

事实上，上面如果换到下个月或者上个月，当前的选择依然会得到保存，并且显示如初。

这个批量选择日期，在有些场合，比如计划或者查询的时候可以用到。

首先声明：这是改编过来的一个多选日期插件，原来的是一个普通但很实用的日历控件，再次需要真诚感谢原作者。

设计了一个类,主要的思路是:(屏蔽选择即消失的代码，记住选中并着色的日期，根据日期控件区域绘制过程的当前数据显示此前记住的日期.)

 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文件我已经上传到园子里的文件中了，不过找了半天，我竟然有点不清楚如何把博客管理中文件中的资源通过某种方式显示在当前文档.

外面有点冷，感觉有些困了..

posted on 2012-12-04 22:56 黄岛主阅读(3238) 评论(2) 编辑收藏举报

最近改造的一款可多选的日历插件，已通过兼容性测试

搜索

常用链接

最新随笔

我的标签

积分与排名

合集 (1)

随笔档案 (109)

阅读排行榜

评论排行榜

推荐排行榜

最新评论