jquery - 日历插件（自定义模板的日历插件）

最新推荐文章于 2025-05-05 09:09:33 发布

TBSE07022

最新推荐文章于 2025-05-05 09:09:33 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： jquery 日历 function class date div

本文链接：https://blog.csdn.net/TBSE07022/article/details/7593036

javascript 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery实现一个自定义模板的日历插件，包括设置年份、月份、模板结构、样式类以及点击事件处理。通过示例代码展示了如何创建并初始化日历，以及如何处理左右滚动月份的功能。

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

(function($){
    $.fn.datetime = function(o){
        //默认配置
        var def = {
            year: 2012,//显示年
            month: 5,//显示月
            template:'<div class="clear h15 bsbtm_e"></div>\
                <ul class="gray6 h30">\
                    <li class="fleft w20 pdtop1 pointer datetime_leftbtn"><span class="fright disp mtop10 black_left_icon"></span></li>\
                    <li class="fleft textcenter w180 datetime_showhtml">2012年4月</li>\
                    <li class="fleft pdtop1 w20 pdtop1 pointer datetime_rightbtn"><span class="fleft mleft5 black_right_icon disp mtop10"></span></li>\
                </ul>\
                <div class="pdleft5 pdright5">\
                    <table cellpadding="0" cellspacing="0" border="0" width="100%" class="datetime_content textcenter gray6 h20">\
                        <tr>\
                            <th class="fb tcenter">日</th><th class="fb tcenter">一</th><th class="fb tcenter">二</th><th class="fb tcenter">三</th><th class="fb tcenter">四</th><th class="fb tcenter">五</th> <th class="fb tcenter">六</th>\
                        </tr>\
                        <tr class="pointer datetime_itemrow">\
                            <td class="datetime_item"></td>\
                        </tr>\
                    </table>\
                </div>\
                <div class="clear h15 bsbtm_e"></div>',//模板（模板标签是样式）
            notincss: "grayee",//不属于当前月的日期的样式
            oncss: "back_light_green9",//鼠标停留日期的样式
            selectcss: "bg_green9",//点击选中的样式
            nowcss: "back_blue",//当前日期的样式
            clickitem: function(day){},//点击日期事件
            now: new Date()//当前时间
        };
        $.extend(def, o);
        
        return this.each(function(){
            var $me = $(this);
            var $content = $(def.template);
            var $row = $content.find(".datetime_itemrow").clone();
            var $item = $row.find(".datetime_item").clone();
            $row.find(".datetime_item").remove();
            $content.find(".datetime_itemrow").remove();
            var def_year = def.year; 
            var def_month = def.month;
                
            $me.html("");
            setcontent(def_year, def_month);
            $me.append($content);
            init_fucntion();
                
            function setcontent(year, month){
                $content.find(".datetime_itemrow").remove();
                var weeks = getshowmonthweeks(year, month);
                for(var i in weeks){
                    var week = weeks[i];
                    var start = week.start;
                    var end = week.end;
                    var $trow = $row.clone();
                    while($.gettimedifference(start, end, 's') >= 0){
                        var $titem = $item.clone();
                        $titem.html($.dateformat("d", start));
                        if($.dateformat("m", start) != month){
                            $titem.addClass(def.notincss);
                        }
                        else{
                            $titem.bind("mouseover", function(){
                                $(this).addClass(def.oncss);
                            });
                            $titem.bind("mouseout", function(){
                                $(this).removeClass(def.oncss);
                            });
                            $titem.bind("click", function(){ 
                                var date = $(this).attr("date");
                                def.clickitem(date); 
                                $content.find(".datetime_item").removeClass(def.selectcss);
                                $(this).addClass(def.selectcss);
                            });
                        }
                        
                        if($.dateformat("Ymd", start) == $.dateformat("Ymd", def.now)){
                            $titem.addClass(def.nowcss);
                        }
                        $titem.attr("date", $.dateformat("Y-n-j", start));
                        
                        $trow.append($titem);
                            
                        start = $.addday(start, 1);
                    }
                    $content.find(".datetime_content").append($trow);
                }
                $content.find(".datetime_showhtml").html($.dateformat("Y年m月", year+"-"+month+"-1"));
            }
                
            //减少月份
            function leftclick(){
                var day = def_year + "-" + def_month + "-1";
                day = $.getupmonth(day);
                var year = $.dateformat("Y", day);
                var month = $.dateformat("m", day);
                setcontent(year, month);
                def_year = year;
                def_month = month;
            }
            //添加月份
            function rigthclick(){
                var day = def_year + "-" + def_month + "-1";
                day = $.getnextmonth(day);
                var year = $.dateformat("Y", day);
                var month = $.dateformat("m", day);
                setcontent(year, month);
                def_year = year;
                def_month = month;
            }
            //功能初始化
            function init_fucntion(){
                $content.find(".datetime_leftbtn").bind("click", function(){
                    leftclick();
                });
                $content.find(".datetime_rightbtn").bind("click", function(){
                    rigthclick();
                });
            }
        });
        
        //获取显示的周
        function getshowmonthweeks(year, month){
            var weeks = $.getmonthweek(year, month);
            var start = year+"-"+month+"-1";
            var date = weeks[1].start;
                
            if($.dateformat("Y-m-d", date) != year+"-"+month+"-1"){
                var tday = $.getupmonth(start);
                var tweeks = $.getmonthweek($.dateformat("Y", tday), $.dateformat("m", tday));
                weeks = [].concat(tweeks.pop(), weeks);
            }
            var len = 0;
            for(var i in weeks){
                len ++;
            }
            if(len < 6){
                var tday = $.getnextmonth(start);
                var tweeks = $.getmonthweek($.dateformat("Y", tday), $.dateformat("m", tday));
                while(len < 6){
                    var t = tweeks.shift();
                    if(t){
                        weeks.push(t);
                        len++;
                    }
                }
            }
            return weeks;
        }
    }
})(jQuery);