vue.js实现日历功能

最新推荐文章于 2024-03-25 09:59:17 发布

小铁柱来咯

最新推荐文章于 2024-03-25 09:59:17 发布

阅读量634

点赞数

分类专栏： js 文章标签： vue.js 日历

本文链接：https://blog.csdn.net/supercaojh/article/details/107105716

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-HK" lang="zh-HK" prefix="og: http://ogp.me/ns#">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<style>
     *{margin:0;padding:0}
        #calendar{width:210px;margin:100px auto; overflow:hidden;border:1px solid #000; padding:20px; position:relative}
        #calendar h4{ text-align:center; margin-bottom:10px}
        #calendar .a1{ position:absolute;top:20px;left:20px;}
        #calendar .a2{ position:absolute;top:20px;right:20px;}
        #calendar .week{height:30px; line-height:20px;border-bottom:1px solid #000; margin-bottom:10px}
        #calendar .week li{ float:left;width:30px;height:30px; text-align:center; list-style:none;}
        #calendar .dateList{ overflow:hidden; clear:both}
        #calendar .dateList li{float:left;width:30px;height:30px; text-align:center; line-height:30px;list-style:none;}
        #calendar .dateList .ccc{ color:#ccc;}
        #calendar .dateList .red{ background:#F90; color:#fff;}
        #calendar .dateList .sun{ color:#f00;}
        .clickColor{
            width:100px;
            height:100px;
            background:#f00;
        }
</style>
<body>
<div id="app">
    <div id="calendar">
        <h4>{{year}}年{{month}}月{{day}}日</h4>
        <a class="a1" id="prev" @click="prev">上月</a>
        <a class="a2" id="next" @click="next">下月</a>
        <ul class="week">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ul class="dateList" id="dateList">    
            <li v-for="item in preMonth" style="color: #ccc;">{{item}}</li>
            <li v-for="item in currMonth" :style="day==item&&month==new Date().getMonth()+1&&year==new Date().getFullYear()?'color:red':''">{{item}}</li>
            <li v-for="item in nextMonth" style="color: #ccc;">{{item}}</li>
        </ul>
  </div>
</div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
var app = new Vue({
  el: '#app',
  data: {
    time:new Date(),
    year:"",
    month:"",
    day:"",
    week:"",
    month0:["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28"],
    month1:["29","30","31"],
    month2:["29","30"],
    month3:["29"],
    month4:[],
    currMonth:[],
    preMonth:[],
    nextMonth:[],
  },
  mounted(){
   this.date()
  },
  methods:{
    date(){
     this.year=this.time.getFullYear()
     this.month=this.time.getMonth()+1
     this.day=this.time.getDate()
     this.months(this.month)
     this.currMonth=this.month4
     this.oneDay(this.year,this.month,1)
     this.changeMonth()
    },
    prev(){
        this.month=this.month==1?12:this.month-1
        this.year=this.month==12?this.year-1:this.year
        this.oneDay(this.year,this.month,1)
        this.months(this.month)
        this.currMonth=this.month4
        this.changeMonth()
    },
    next(){
        this.month=this.month==12?1:this.month+1
        this.year=this.month==1?this.year+1:this.year
        this.oneDay(this.year,this.month,1)
        this.months(this.month)
        this.currMonth=this.month4
        this.changeMonth()
    },
    months(month){
        if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
            this.month4=this.month0.concat(this.month1)
        }
        if(month==4||month==6||month==9||month==11){
            this.month4=this.month0.concat(this.month2)
        }
        if(month==2){
            if(this.year%4==0){
                this.month4=this.month0.concat(this.month3)
            }else{
                this.month4=this.month0
            }
            
        }
    },
    changeMonth(){
        this.months(this.month-1)
     this.preMonth=this.month4.slice(this.month4.length-this.week,this.month4.length)
     this.months(this.month+1)
     if(this.preMonth.length+this.currMonth.length>35){
        this.nextMonth=this.month4.slice(0,42-this.preMonth.length-this.currMonth.length)
     }else{
        this.nextMonth=this.month4.slice(0,35-this.preMonth.length-this.currMonth.length)
     }
    },
    oneDay(y,m,d){ 
     this.time.setFullYear(y,m-1,d);
     this.week = this.time.getDay()
    }
  }
})
</script>

小铁柱来咯

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue.js实现日历功能

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-HK" lang="zh-HK" prefix="og: http://ogp.me/ns#"><head><title></title><meta name="viewport" content=.
复制链接

扫一扫