手写日历组件（vue+js）

最新推荐文章于 2024-04-07 15:17:42 发布

WeiflR10

最新推荐文章于 2024-04-07 15:17:42 发布

阅读量816

点赞数 2

文章标签： css html css3

本文链接：https://blog.csdn.net/WeiflR10/article/details/121397421

版权

<div class="cldBody">
                <table>
                    <thead>
                        <tr id="week">
                            <td>日</td>
                            <td>一</td>
                            <td>二</td>
                            <td>三</td>
                            <td>四</td>
                            <td>五</td>
                            <td>六</td>
                        </tr>
                    </thead>
                    <tbody id="tbody"></tbody>
                </table>
            </div>

css部分

/* 日历 */

.cldBody {
    width: 100%;
    margin: 0.1rem auto;
}
#week{
    height: 0.5rem;
}
#week td {
    font-size: 0.16rem;
    color: #BFBFBF;
}
td {
    position: relative;
    width: 1rem;
    text-align: center;
    /* padding: 0.25rem 0; */
    color: #BFBFBF;
}
/* 当前日期高亮 */
.curDate{
    color: #000000;
}
.signClass{
    display: inline-block;
    width: 0.05rem;
    height: 0.05rem;
    background-color: #FE8810;
    border-radius: 50%;
    position: absolute;
    bottom: 0.1rem;
    left: 50%;
    margin-left: -0.025rem;
}
.signcolor{
    color: #000000;
}
.isbgcolor{
    display: inline-block;
    width: 0.4rem;
    height: 0.5rem;
    line-height: 0.5rem;
}
.bgcolor{
    background-color: #10A58A;
    color: white;
    border-radius: 0.1rem;
    box-shadow: 0px 2px 25px 0px rgba(16, 165, 138, 0.3);
}

js部分

<script>
    new Vue({
        el: '.reportBox',
        data() {
            return {
                show: false,
                years: [],   //近三年头部可选择年份数据
                months: [],  //月份数据
                changeyear:null,   //选中的年份
                currentYear: null,  //当前年份
                changemonth:null,   //选中的月份
                currentMonth: null,   //当前月份
                date: null,
                year: null,
                month: null,
                dateday: null,
                signArr:[3,4,15,30],   //标记数据
                signClass:"signClass",  //标记class类名称
            }
        },
        created() {
            this.date = new Date();
            this.year = this.date.getFullYear();
            this.currentYear = this.date.getFullYear()
            this.changeyear = this.currentYear
            this.month = this.date.getMonth()+1;
            this.currentMonth = this.date.getMonth() + 1
            this.changemonth = this.currentMonth
            this.dateday = this.date.getDate();
            for (var i = this.currentYear; i > this.currentYear - 3; i--) {
                this.years.push({
                    name: i
                })
            }
            for (var i = 1; i < 13; i++) {
                this.months.push({
                    name: i
                })
            }
            this.showcld(this.year,this.month)
        },
        mounted(){
            // 点击当天更改背景色
            $(".isDate").click(function (){
                console.log($('td').siblings(".isDate"))
                $('td').siblings(".isDate").removeClass('bgcolor')
                $(this).addClass("bgcolor");
            });
        },
        methods: {
            changeYear() {
                this.show = true
            },
            showcld(year,month){
                var monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 创建数组存放每个月有多少天 ,默认2月为28天
                // 判断闰年
                if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                    monthDay[1] = 29;
                }
                // 计算每个月的天数
                var days = monthDay[month - 1];
                // 判断每月第一天为周几
                this.date.setYear(year); //某年
                this.date.setMonth(month - 1); //某年的某月
                this.date.setDate(1); // 某月的某天
                var weekday = this.date.getDay(); // 判断某天是周几
                // 补齐一号前的空格
                var tbodyHtml = '<tr>';
                for (var i = 0; i < weekday; i++) {
                    tbodyHtml += "<td></td>";
                }
                // 补齐每月的日期
                var changLine = weekday;
                var tagClass = '';
                for (i = 1; i <= days; i++) { //每一个日期的填充
                    if (year == this.currentYear && month == this.currentMonth && i == this.dateday) {
                        tagClass = "curDate"; //当前日期对应格子
                    } else {
                        tagClass = "isDate";
                    }
                    for(var j=0;j<this.signArr.length;j++){
                        if(i==this.signArr[j]){
                            tagClass = "signcolor"
                        }
                    }
                    tbodyHtml += "<td class='isDate "+tagClass+"'" + ">" + "<p class='isbgcolor'>" + i + "</p>";
                    // 打标记
                    for(var j=0;j<this.signArr.length;j++){
                        if(i==this.signArr[j]){
                            tagClass = "signcolor"
                            tbodyHtml += "<span class=" + this.signClass + ">" + "</span>";
                        }
                    }
                    changLine = (changLine + 1) % 7;
                    if (changLine == 0 && i != days) { //是否换行填充的判断
                        tbodyHtml += "</tr><tr>";
                    }
                }
                $('#tbody').empty(); // 清空原有的内容
                $('#tbody').append(tbodyHtml); //添加当前月份的日期内容
                var todateHtml = year + '年' + month + '月';
            },
            // 选择月份
            changeMonth(e){
                this.month = e
                this.showcld(this.year,e);
                this.changemonth = e
            },
            // 选择年份
            onSelect(e) {
                this.changeyear = e.name
                this.show = false
                this.year = e.name
                this.showcld(e.name,this.month);
            },
        }
    })
</script>

效果图: