仿微博的JQuery日历控件

重造个轮子
服务器君一共花费了217.696 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

就是常见的选取日期的日历控件而已,还没到的日期无法选择,其它的都和正常日历控件差不多,先看看演示效果吧。

实现原理主要是处理table,生成tr td,其中最重要的是如何找出每月第一天是星期几,然后就能对应出这个月的余下天数。

日历控件网上一搜一大把,但是我觉得自己写一遍还是有好处的。代码可以查看本页源代码,下面是js代码:

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
        //全部包裹
        var sookerTime = (function ($) {
            var OBJ;
            function isLeap(year) { return (year % 100 == 0 ? (year % 400 == 0 ? 1 : 0) : (year % 4 == 0 ? 1 : 0)); }
            function isValid(d) { return (d.getTime() - (new Date()).getTime() < 0) ? true : false; } //是否在今天以后
            function setDate(year, month) {     //建立日期table
                var n1 = new Date(year, month, 1),
                    firstday = n1.getDay(),
                    mdays = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),
                    rows = Math.ceil((mdays[month] + firstday) / 7),
                    table = $("<table>", { "class": "days" }),
                    tbody = $("<tbody>");
                $("#calendar").find(".days").remove();
                for (var i = 0; i < rows; i++) {
                    var tr = $("<tr>");
                    for (j = 0; j < 7; j++) {
                        var idx = i * 7 + j,
                            d = idx - firstday + 1;
                        if (d <= 0 || d > mdays[month]) {   //无效日期
                            d = " "
                        }
                        var td = $("<td>", { html: d }).appendTo(tr);
                        if (isValid(new Date(year, month, d))) {  //今天以后的时间都不绑定时间
                            td.addClass("before");
                            td.hover(function () {
                                $(this).addClass("day");
                            }, function () { $(this).removeClass("day"); }).click(function () {
                                OBJ.attr("value", $("#calendar .year").attr("value") + "-" + (parseInt($("#calendar .month").attr("value")) + 1) + "-" + $(this).text());
                                $("#calendar").css("display", "none");
                            });
                        }
                    }
                    tr.appendTo(tbody);
                }
                tbody.appendTo(table);
                $("#calendar").append(table);
            }
            function createTime() {
                var calendar = $("<div>", { "class": "pc_caldr", id: "calendar" }),

                        td = new Date(),
                        of = OBJ.offset();
                if (document.getElementById("calendar")) {
                    calendar = $("#calendar").css({ left: of.left, top: of.top + 18, display: "block" });
                    setDate(td.getFullYear(), td.getMonth());
                    $("#calendar .year").attr("value", td.getFullYear());
                    $("#calendar .month").attr("value", td.getMonth());
                } else {
                    var se = "<div class='selector'><select class='month'><option value='0'>一月</option><option value='1'>二月</option><option value='2'>三月</option><option value='3'>四月</option><option value='4'>五月</option><option value='5'>六月</option><option value='6'>七月</option><option value='7'>八月</option><option value='8'>九月</option><option value='9'>十月</option><option value='10'>十一月</option><option value='11'>十二月</option></select><select class='year'><option value='2009'>2009</option><option value='2010'>2010</option><option value='2011'>2011</option></select></div><ul class='weeks'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>";
                    calendar.css({ left: of.left, top: of.top + 18 }).html(se).appendTo($("body"));
                    setDate(td.getFullYear(), td.getMonth());
                    $("#calendar .year").attr("value", td.getFullYear());
                    $("#calendar .month").attr("value", td.getMonth());
                    bindClick();
                }
            }
            function bindClick() {   //给下拉列表绑定时间
                var a = $("#calendar .month"),
                   b = $("#calendar .year");
                a.change(function () {
                    setDate(b.attr("value"), $(this).attr("value"));
                });
                b.change(function () {
                    setDate($(this).attr("value"), a.attr("value"));
                });
            }
            return {
                init: function (obj) {   //返回调用的接口              
                    OBJ = obj;
                    createTime();
                }
            }
        })(jQuery);

        //使用方法
        $(".tiemin").focus(function(){ 
           sookerTime.init($(this));
         });
          
    </script>

本文地址:http://www.nowamagic.net/librarys/veda/detail/134,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/134

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《Head First设计模式(中文版)》 弗里曼 (作者), 等 (作者)

《Head First设计模式》(中文版)共有14章,每章都介绍了几个设计模式,完整地涵盖了四人组版本全部23个设计模式。前言先介绍这本书的用法;第1章到第11章陆续介绍的设计模式为Strategy、Observer、Decorator、Abstract Factory、Factory Method、Singleton,Command、Adapter、Facade、TemplateMethod、Iterator、Composite、State、Proxy。最后三章比较特别。第12章介绍如何将两个以上的设计模式结合起来成为新的设计模式(例如著名的MVC模式),作者称其为复合设计模式(这是作者自创的名称,并非四人组的标准名词)。

更多计算机宝库...