一个由Jquery的UL选择器改写的日历插件

这些天在忙着搞公司的年底盘成,还要写年终总结,最重要的是在帮老婆做的一个小的办公系统....这个是重中之重啊...

为了使老婆使用更方便,更人性化,我需要一个可选择多个天数的日历插件,就是在日历中可一次选择多个天数,然后以数组的形式返回,在网上找了好多日历插件,都是只能选择某一天的日期,后来我联系了前端设计的高手CssRain,通过他的指点,总算找到一点头绪,就是在点击的时候push到一个自定义的数组里面!方法有了,可是代码还是不知从何下手,后来借助Jquery选择器,今天总算是把这个难题给解决了,所以一定要记录下来,也许以后大家项目中也会用的上的,下面是代码:

<%    
'以下为ASP中通过该日历算法实现的具体代码    
    
    '先判断是否指定了一个年份和月份,没有则根据当前的年和月份显示    
    If Request("ReqDate")="" then    
         CurrentDate=Date    
    else    
         CurrentDate=Trim(Request("ReqDate"))    
    end if     
    pyear=year(CurrentDate)    
    pmonth=month(CurrentDate)    
    
    '以下的代码生成日历显示的表格头内容    
%>    
  
<input type="text" id="checkbox1_value">
  
<div class="rili">   
<span onClick="JavaScript:location.href='?ReqDate=<%=DateAdd("m",-1,CurrentDate) %>'"><<</span>   
<%=pyear%>年<%=pmonth%>月   
<span onClick="JavaScript:location.href='?ReqDate=<%=DateAdd("m",1,CurrentDate)%>'">>></span>    
<span onClick="JavaScript:location.href='?ReqDate=<%=Date()%>'">now</span>    
<ul>   
<li>日</li>   
<li>一</li>   
<li>二</li>   
<li>三</li>   
<li>四</li>   
<li>五</li>   
<li>六</li>   
</ul>   
<ul id="checkbox1" class="checkbox" nonevalue="0" othervalue="9">   
  <%    
  '由于ASP中没有获取指定月共有多少天的函数,因此我们需要通过其他算法来获得,算法其实很简单,就是计算一下要显示月份的1日至下个月的1日一共相差几天    
    fromDate = FormatDateTime(month(CurrentDate) & "/1/" &  year(CurrentDate))     
    toDate = FormatDateTime(DateAdd("m",1,fromDate))     
    '获得要显示月份的第一天为周几    
    nunmonthstart=weekday(fromDate)-1    
    '获得要显示的1日至下个月的1日一共相差几天(月份一共有多少天)    
    nunmonthend=DateDiff("d",fromDate,toDate)    
    '判断显示日历需要用几行表格来显示(每行显示7天)    
    if nunmonthstart+nunmonthend<36 then    
         maxi=36    
    else    
         maxi=43    
    end if    
    '循环生成表格并显示    
    i=1    
    do while i<maxi    
        iv=i-nunmonthstart    
        if i>nunmonthstart and i<=nunmonthend+nunmonthstart then    
            '如果为显示的是今天则用红色背景显示    
            if iv=Day(now) and month(now)=pmonth and year(now)=pyear then    
                response.write( "<li value="&iv" class=""checked"">" & iv & "</li>")    
            else    
                response.write( "<li value="&iv">" & iv & "</li>")    
            end if    
        else    
            response.write( "<li value=0></li>")    
        end if    
           
        i=i+1    
    loop    
%>    
</ul>   
</div>

接下来是javascript代码:

<script language="javascript">   
$(document).ready(function() {   
    $(".checkbox li").click(function(){   
        $(this).toggleClass("checked");   
  
        var id = $(this).parent().attr("id");   
        var type = $(this).parent().attr("class");   
        var nonevalue = $(this).parent().attr("nonevalue");   
        var othervalue = $(this).parent().attr("othervalue");   
        if(type=='undefined') type='checkbox';   
        if(nonevalue=='undefined') nonevalue='0';   
        if(othervalue=='undefined') othervalue='-1';   
  
        var array_value = new Array();   
        var value = $(this).attr("value");   
        if(value==nonevalue) {   
            $("#"+id+" li[value!='"+nonevalue+"']").removeClass("checked");   
  
            array_value = new Array(nonevalue);   
        } else {   
            $("#"+id+" li[value='"+nonevalue+"']").removeClass("checked");   
  
            $("#"+id+" li[class='checked']").each(function(){   
                array_value.push($(this).attr("value"));   
            });   
        }   
  
        $("#"+id+"_value").val(array_value.join(","));   
    });   
});   
</script>

最后是css代码:

<style>   
ul{    
    margin:0;    
    padding:0   
}   
li{    
    list-style:none;    
    display:inline;    
    text-align:center;    
    margin:0;    
    float:left;    
    width:35px;padding:5px }   
.rili{    
    width:260px;   
    font-size:12px;   
}   
.checked {   
    background-color: #ff0000;   
    font-weight: bold;   
}   
</style>

最后别忘了再页面最开头加上

<script src="jquery.js"></script>
效果图如下:

上面的输入框就是返回的所选择的天数源码下载

评论列表

辞呈范文

辞呈范文 回复

技术型文章,必须支持一下(2012-06-26 16:59:46)
沟通

沟通 回复

把UL写到JS里面的话,虽然很炫,不是不利于搜索引擎吗(2011-12-12 16:06:47)
gotone

gotone 回复

LZ厉害,好东西!(2011-12-12 16:04:19)
gzfd

gzfd 回复

人气不怎样哦,帮你踩踩。(2011-11-29 07:34:06)
雷奥

雷奥 回复

正好,谢谢楼主的程序(2011-08-10 18:55:43)
宁波装饰公司

宁波装饰公司 回复

我也在用楼主的博客程序,呵呵,非常的不错,感谢楼主。(2011-06-26 07:37:09)
什么牌子的枕头好

什么牌子的枕头好 回复

不错,学习中……很多代码还是不会弄,还在慢慢的学习!(2011-05-31 07:16:10)
monsoon

monsoon 回复

羡慕博主的专业与钻研能力(2011-01-11 15:14:32)
时尚生活馆

时尚生活馆 回复

我用的是你发布的那个模板,为什么,我提交FEED时老是说格式错误?这个FEED要怎么弄呀(2011-01-10 10:38:41)
成都广告公司

成都广告公司 回复

一般代码都需要什么来支持显示啊 我咋没这项功能呢(2011-01-08 20:52:56)
Stainless

Stainless 回复

都是代码啊,看不懂呢,应该去学下计算机语言(2011-01-08 15:02:05)
www.szkscx.com

www.szkscx.com 回复

呵呵,博主还是听厉害的吗(2011-01-07 17:57:36)
airnailer

airnailer 回复

这串代码是放在哪里的(2011-01-06 20:24:02)
佘星星

佘星星 回复

大家可以根据需要自行学习和研究的。(2011-01-04 17:47:58)
左坤

左坤 回复

您好的,您的主题现在在用,发现你的内页侧边栏都是JS调用得到的,而这样调用的话,对于搜索引擎不利哦(2011-01-03 22:20:56)
诺贝笔

诺贝笔 回复

谢谢分享,我刚好用到日历功能(2011-01-02 20:25:03)
kaka

kaka 回复

老湿不也在折腾啊~~哈哈~(2011-01-02 11:20:00)
昆明seo

昆明seo 回复

支持一下!(2011-01-01 12:45:55)
宋骥光

宋骥光 回复

看不懂JS啊!哎……(2011-01-01 11:27:52)
杜保华

杜保华 回复

新年快乐,2011我们一起加油(2011-01-01 09:49:46)
温州搬家

温州搬家 回复

文化低 有些看不懂(2010-12-31 23:46:50)
青岛SEO

青岛SEO 回复

很不错,支持一下来~(2010-12-31 17:40:53)
music265

music265 回复

也许以后大家项目中也会用的(2010-12-30 17:22:32)
晓力博客

晓力博客 回复

这个效果不错!(2010-12-30 17:01:42)
比度克官网

比度克官网 回复

看不懂啊!(2010-12-29 21:58:44)

发表评论

(必填)

(必填)

(选填)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新发布

热门讨论