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


    先上截图:

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

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

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

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

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

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

    今天很残酷,明天很残酷,后天很美好...行胜于言<来源于博客园:黄岛主>.... 个站:配置啦
  • 相关阅读:
    linux—上传,下载本地文件到服务器
    elasticsearch摸石头过河——数据导入(五)
    elasticsearch摸石头过河——配置文件解析(四)
    elasticsearch摸石头过河——基本安装应用(三)
    elasticsearch摸石头过河——常用数据类型(二)
    spring AOP——名词,语法介绍(一)
    EXCEL(POI)导入导出工具类
    MAVEN 排除第三方jar
    elasticsearch摸石头过河——基本概念(一)
    websocket应用
  • 原文地址:https://www.cnblogs.com/taohuadaozhu/p/2802277.html
Copyright © 2020-2023  润新知