vue日历(纯 js,没用任何插件和组件)

效果图:

 代码:  

　

<template>
  <div class="calender">
    <div class="top">
      <div class="top_date">
        {{year}}年{{month}}月
      </div>
      <div class="btn_wrap">
        <ul>
          <li @click="handleShowNextMonth">
            下个月
          </li>
          <li @click="handleShowToday">
            今天
          </li>
          <li @click="handleShowLastMonth">
            上个月
          </li>
        </ul>
      </div>
    </div>
    <div class="date_wrap">
      <ul class="week">
          <li>日</li>
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li>六</li>
      </ul>
      <ul class="day">
        <li v-for="(item,index) in days" :key=index :class="{now:nowLi==year.toString()+month.toString()+item}">
          {{item}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'calender',
  data () {
    return {
     year:'',
     month:'',
     days:[],
     nowLi:'',
    }
  },
  methods:{
    //控制当前日期显示特殊样式
    handleShowDateStyle(){
      let now = new Date()
      this.nowLi=now.getFullYear().toString()+(now.getMonth()+1).toString()+now.getDate().toString()
      console.log(this.nowLi)
    },
    //得到当前年这个月分有多少天
    getDays(Y,M){
      let day = new Date(Y, M, 0).getDate()
      return day;
    },
    //得到当前年，这个月的一号是周几
    getWeek(Y,M){
        let now = new Date()
        now.setFullYear(this.year)
        now.setMonth(this.month-1)
        now.setDate(1);
        let week = now.getDay();
        return week;
    },
    pushDays(){
            //将这个月多少天加入数组days
            for(let i = 1; i<=this.getDays(this.year,this.month);i++){
              this.days.push(i)
            }
            //将下个月要显示的天数加入days
            // for(let i = 1;i<=42-this.getDays(this.year,this.month)-this.getWeek(this.year,this.month);i++){
            //   this.days.push(i)
            // }
            //将上个月要显示的天数加入days
            for(let i=0;i<this.getWeek(this.year,this.month);i++){
              var lastMonthDays=this.getDays(this.year,this.month-1)
                this.days.unshift(lastMonthDays-i)
            }
             console.log(this.days)
             console.log(this.getWeek(this.year,this.month))
    },
    getDate(){
            let now = new Date();
            this.year = now.getFullYear();
            this.month = now.getMonth()+1;
            this.pushDays();
            
    },
    changeDate(){

    },
    handleShowNextMonth(){
       this.days=[];
      if(this.month<12){
        this.month=this.month+1;
         this.pushDays();
      }else{
        this.month= this.month=1;
        this.year=this.year+1;
        this.pushDays();
      }
      
    },
    handleShowToday(){
      this.days=[];
      let now = new Date();
      this.year=now.getFullYear();
      this.month=now.getMonth()+1;
      this.pushDays();
    },
    handleShowLastMonth(){
       this.days=[];
      if(this.month>1){
         this.month=this.month-1;
      this.pushDays();
      }else if( this.year>1970){
        this.month=12;
        this.year=this.year-1;
        this.pushDays();
      }else{
        alert("不能查找更远的日期")
      }
      
    }
  },
  mounted(){
    this.getDate();
    this.handleShowDateStyle();
  }
}
</script>
<style scoped>
.calender{
  width: 600px;
  position: relative;
  margin: 0 auto;
  margin-top: 50px;
  border: 1px solid #ddd;
  padding: 20px;
}
.top{
  width: 100%;
  position: relative;
  display: flex;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}
.top_date{
  width: 100px;
  text-align: left;
  line-height: 42px;
}
.btn_wrap{
  flex: 1;
  text-align: right
}
.btn_wrap ul{
  display: flex;
  flex-direction: row-reverse
}
.btn_wrap ul li{
  padding: 10px 20px;
  border: 1px solid #ddd;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.btn_wrap ul li:hover{
  background: #ddd;
  color:red;
}
.btn_wrap ul li:first-child{
  border-left: none;
}
.btn_wrap ul li:last-child{
  border-right: none;
}
.date_wrap{
  position: relative;
}
.week{
  display: flex;
  flex-direction: row;
  padding: 20px;
  font-size: 16px;
}
.week li{
  width: 14.28%;
}
.day{
  display: flex;
  flex-direction: row;
  padding: 20px;
  font-size: 16px;
  flex-wrap: wrap;
}
.day li{
  width: 14.28%;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #ddd
}
.day li:nth-child(n+8){
  border-top:none;
}
.day li:nth-child(n+1){
  border-right: none;
}
.day li:nth-child(7n){
  border-right: 1px solid #ddd
}
.now{
  background: #f2f8fe;
  color:#1989fa;
}


</style>

 

感谢 各位老板  小额打赏:   (有问题call俺)

              

参考链接:https://www.jianshu.com/p/6d8a138d2592