jquery制作日历源码 js日历中几个重要的函数

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer{margin:0;}
        body,button,input,select,textarea{font:12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif}
        h1,h2,h3,h4,h5,h6{font-size:100%}
        em,b{font-style:normal}
        a{text-decoration:none} 
        a:hover{text-decoration:underline}
        img{border:0} 
        body{padding-top:42px} 
        button,input,select,textarea{font-size:100%;outline:none}
        table{border-collapse:collapse;border-spacing:0}
        td,th,ul,ol{padding:0}
        li{list-style:none;}
        .clear{clear:both;}
        .calendarBOx{width:147px;}
        .calendar-week-list{width:154px;}
        .calendar-week-list ul li{width:22px;float:left;text-align:center;height:20px;line-height:20px;}
        .calendar-list{width:154px;}
        .calendar-list ul li{width:20px;float:left;border:1px solid #fff;text-align:center;height:20px;line-height:20px;cursor:pointer;}
        li.prev-date{background:#f1f1f1;}
        li.now-date{background:#d9d9d9;}
        li.now-date.selected{border-color:#f00;}
        li.next-date{background:#f1f1f1;}
        .calendarBOx .top{height:20px;position:relative;}
        .calendarBOx .top .movePrev,.calendarBOx .top .moveNext{position:absolute;width:20px;height:20px;text-align:center;line-height:20px;top:0px;z-index:2;
            cursor:pointer;transition:all 0.5s;;
        }
        .calendarBOx .top .movePrev:hover,.calendarBOx .top .moveNext:hover{background:cyan;}
        .calendarBOx .top .movePrev{left:0px;}
        .calendarBOx .top .moveNext{right:0px;}
        .calendarBOx .top p{position:relative;z-index:1;text-align:center;line-height:20px;;}

<div class="calendarBOx">
        <div class="top">
            <span class="movePrev"><</span>
            <p>2019-10</p>
            <span class="moveNext">></span>
        </div>
        <div class="calendar-week-list">
            <ul><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>
        </div>
        <div class="calendar-list">
        </div>
        <div class="clear"></div>
    </div>

<script>
        function getNowFormatDate(){//获取当前年月日
            var date = new Date();
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate;
            return [year, month, strDate];
        }
        function getPrevFormatDate(year, month) {//月--
            if (month <= 1) {
                month = 12;
                year--;
            } else {
                month--;
            }
            return [year, month]
        }
        function getNextFormatDate(year, month) {//月++
            if (month >= 12) {
                month = 1;
                year++;
            } else {
                month++;
            }
            return [year, month]
        }
        function getMonthDay(year, month) {//获取一个月多少天
            month = parseInt(month, 10);
            var d = new Date(year, month, 0);
            return d.getDate();
        }
        function getMyDay(date) {//获取当前星期几
            var week;
            var date = new Date(date);
            // if(date.getDay()==0) week="周日"
            // if(date.getDay()==1) week="周一"
            // if(date.getDay()==2) week="周二"
            // if(date.getDay()==3) week="周三"
            // if(date.getDay()==4) week="周四"
            // if(date.getDay()==5) week="周五"
            // if(date.getDay()==6) week="周六"
            return date.getDay();
        }
        window.onload = function () {
            var calYear=getNowFormatDate()[0],calMonth=getNowFormatDate()[1],selectDate=getNowFormatDate()[2];
            calendar(calYear,calMonth);
            $(".calendarBOx .top .movePrev").click(function(){
                let newYear = getPrevFormatDate(calYear, calMonth)[0];
                let newMonth = getPrevFormatDate(calYear, calMonth)[1];
                calYear=newYear,calMonth=newMonth;
                calendar(newYear,newMonth);
            })
            $(".calendarBOx .top .moveNext").click(function(){
                let newYear = getNextFormatDate(calYear, calMonth)[0];
                let newMonth = getNextFormatDate(calYear, calMonth)[1];
                calYear=newYear,calMonth=newMonth;
                calendar(newYear,newMonth);
            })
            $(".calendar-list").on('click',"li.prev-date",function(){
                let newYear = getPrevFormatDate(calYear, calMonth)[0];
                let newMonth = getPrevFormatDate(calYear, calMonth)[1];
                calYear=newYear,calMonth=newMonth;
                selectDate = $(this).html();
                calendar(newYear,newMonth);
                
            })
            $(".calendar-list").on('click',"li.now-date",function(){
                selectDate = $(this).html();
                $("li.now-date").removeClass("selected");
                $("li.now-date").each(function(){
                    if($(this).html()==selectDate){
                        $(this).addClass("selected")
                    }
                })
            })
            $(".calendar-list").on('click',"li.next-date",function(){
                let newYear = getNextFormatDate(calYear, calMonth)[0];
                let newMonth = getNextFormatDate(calYear, calMonth)[1];
                calYear=newYear,calMonth=newMonth;
                selectDate = $(this).html();
                calendar(newYear,newMonth);
            })
            function calendar(year,month){
                console.log(selectDate)
                $(".calendarBOx .top p").html(year+'-'+(month<10?"0"+month:month))
                var day;
                var monthDays, week
                //year = getNowFormatDate()[0];
                //month = getNowFormatDate()[1];
                day = getNowFormatDate()[2];
                monthDays = getMonthDay(year, month);
                let nowHtml = ''
                for (let i = 0; i < monthDays; i++) {
                    nowHtml = nowHtml + "<li class='now-date'>" + (i + 1) + "</li>"
                }
                console.log(nowHtml)
                let firstWeek = getMyDay(year + '-' + month + '-1');
                let prevHtml = '';
                console.log(firstWeek)
                if (firstWeek > 0) {//说明前面有上个月的数据
                    let prevYear = getPrevFormatDate(year, month)[0];
                    let prevMonth = getPrevFormatDate(year, month)[1];
                    let peevMonthDays = getMonthDay(prevYear, prevMonth);
                    let prevDays = peevMonthDays - firstWeek;

                    for (let i = prevDays; i < peevMonthDays; i++) {
                        prevHtml = prevHtml + "<li class='prev-date'>" + (i + 1) + "</li>"
                    }
                    console.log(prevHtml)
                }
                let lastWeek = getMyDay(year + '-' + month + '-' + monthDays);
                let nextHtml = '';
                if (lastWeek < 6) {//说明前面有上个月的数据
                    let nextDays = 6 - lastWeek;
                    console.log(lastWeek, nextDays, day)
                    for (let i = 0; i < nextDays; i++) {
                        nextHtml = nextHtml + "<li class='next-date'>" + (i + 1) + "</li>"
                    }
                    console.log(nextHtml)
                }
                let html ="<ul>" + prevHtml + nowHtml + nextHtml +"<div class='clear'></div></ul>";
                var testdiv = document.getElementsByClassName("calendar-list")[0]
                testdiv.innerHTML = html;
                $("li.now-date").each(function(){
                    if($(this).html()==selectDate){
                        $(this).addClass("selected")
                    }
                })
            }
        }
    </script>

此案例基于jquery，记得引入jQuery哦

 

案例中，日历的几个重要方法

getNowFormatDate() //获取当前年月

getMonthDay(year, month) //获取一个月多少天

getMyDay(date) //获取当前日星期几