仿微博的JQuery日历控件

最新推荐文章于 2024-09-03 12:21:52 发布

转载最新推荐文章于 2024-09-03 12:21:52 发布 · 4.9k 阅读

文章标签：

#jquery #function #calendar #table #class #日历

Web 同时被 2 个专栏收录

109 篇文章

订阅专栏

JavaScript

101 篇文章

订阅专栏

本文介绍了一个自定义的日历控件实现方法，该控件能够阻止用户选择未来的日期。通过JavaScript处理table元素来生成每个月的日期布局，并且详细解释了如何确定每月第一天对应的星期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

实现原理主要是处理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