jquery 日历 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        #TaskCalendar{ margin-left:10px; margin-right:10px; border-left:solid 1px #cccccc; border-right:solid 1px #cccccc; height:640px;}
       #TaskCalendar label,#TaskCalendar p{ border-bottom:solid 1px #cccccc;text-align:center; line-height:80px; height:80px;}
    </style>
</head>
<body>
    <div id="TaskCalendar">
        <p>
            <a href="#" onclick="javascript:dateData(0);">&nbsp;<&nbsp;</a>&nbsp;
            <span id="year"><%=DateTime.Now.ToString("yyyy") %></span>年
            <span id="month"><%=DateTime.Now.ToString("MM") %></span>月
            &nbsp;<a href="#" onclick="javascript:dateData(1);">&nbsp;>&nbsp;</a>
        </p>
        <label>日</label>
        <label>一</label>
        <label>二</label>
        <label>三</label>
        <label>四</label>
        <label>五</label>
        <label>六</label>
        <div id="content">
        </div>
</div>
</body>
<script>
    dateData(3);
    
    function dateData(type){
    
        var date = new Date();
        
        date = new Date($('#year').html(), parseInt($('#month').html()),0);

        var currentMonth = date.getMonth()+1;        //当前月
        
        var currentYear = date.getFullYear();
        
        if(type == 0){
            if(currentMonth == 0){
                currentYear = currentYear - 1;
                currentMonth = 11;
            }else{
                currentMonth = currentMonth -1;
            }
        }else if(type == 1){
            if(currentMonth == 11){
                currentYear = currentYear + 1;
                currentMonth = 0;
            }else{
                currentMonth = currentMonth +1;
            }
        }
        
        date = new Date(currentYear, currentMonth,0);
        
        var currentMaxDay = new Date(date.getFullYear(), date.getMonth() + 1,0).getDate();  //当前月 - 最大天
        
        var prevMaxDay = new Date(date.getFullYear(), date.getMonth(),0).getDate();         //上一月
        
        var nextMaxDay = new Date(date.getFullYear(), date.getMonth() + 2,0).getDate();     //下一月
        
        date.setDate(1);
        
        var currentWeek = date.getDay();    //当月1日是星期几？
        
        if(currentWeek == 0){
            currentWeek = 7;
        }
        
        date = new Date(currentYear, currentMonth,0);
        
        var html = "";
        
        //遍历上一月
        for(var i = prevMaxDay - currentWeek + 1; i <= prevMaxDay;i++){
            html+= "<label style='background-color:#ccc;'>" + i + "</label>";
        }
        
        //遍历当前月
        for(var j = 1;j <= currentMaxDay;j++ ){
            html+= "<label>" + j + "</label>";
        }
        
        //遍历下一月
        for(var j = 1;j <= 42 - currentMaxDay - currentWeek ;j++ ){
            html+= "<label style='background-color:#9C9C9C;'>" + j + "</label>";
        }
        $('#content').html(html);
        $('#year').html(date.getFullYear());
        $('#month').html(date.getMonth() + 1);
        var width = ($('#TaskCalendar').width() - 2) / 7;
        $('#TaskCalendar label').css({width:width,float:"left"});
    }
    $(window).resize(function() {
        var width = ($('#TaskCalendar').width() - 2) / 7;
        $('#TaskCalendar label').css({width:width,float:"left"});
    });
</script>
</html>

 

posted @ 2021-07-13 00:05  封兴旺  阅读(117)  评论(0)  编辑  收藏  举报

联系方式: 18274305123(微信同号)