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


    先上截图:

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

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

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

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

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

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

    今天很残酷,明天很残酷,后天很美好...行胜于言<来源于博客园:黄岛主>.... 个站:配置啦
  • 相关阅读:
    Git面试题
    JVM的垃圾回收算法
    如何有效避免文件名相同的问题
    java.lang.IllegalArgumentException: An invalid character [44] was present in the Cookie value 异常的原因及处理方法
    eclipse新建maven项目出错 pom.xml报错
    maven配置本地仓库、maven配置阿里中央仓库、eclipse配置maven
    Maven安装、配置环境变量
    XML学习——java解析xml文件
    JSP九大内置对象
    JavaWeb学习——session总结
  • 原文地址:https://www.cnblogs.com/taohuadaozhu/p/2802277.html
Copyright © 2020-2023  润新知