摘要：一周有天，返回的數(shù)，如果上月最后一天是星期二，看下的日歷是補了三天，我們得到的是，所以為此，之后就是填充最后一天，用處理一下再排序，上一個月的數(shù)據(jù)就得到了。

每天進步一點點。寫個簡單的小日歷，依舊用vue，方便

本月的天數(shù)

截取上月的天數(shù)

截取下月天數(shù)

今天給一個樣式

上月、下月切換

回到今天

大致需要完成的東西有以上東西

        

            
<
{{year}}-{{month}}今
>
            

                
{{item}}
            
        
        

            
{{item}}
            
{{item}}
            
{{item}}
        
    

我主要是將日歷的天數(shù)分成了3部分，創(chuàng)建了3個數(shù)組來保存

 data(){
    return{
        prev:[],
        current:[],
        next:[],
        year:"",
        month:"",
        weeks:["日","一","二","三","四","五","六"],
    }
},

接下來獲取本月的天數(shù)

 methods:{
    currentInfo(){
        let date=new Date()
        this.year=date.getFullYear()//當(dāng)年
        this.month=date.getMonth()+1//當(dāng)月
        let currentDate=new Date(this.year,this.month,0)//當(dāng)月最后一天
        let currentArr=[...Array(currentDate.getDate()).fill(1)]//創(chuàng)建當(dāng)月數(shù)組，填充1
        this.current=currentArr.map((item,index)=>item+index)//做數(shù)組處理
},

當(dāng)我們在創(chuàng)建本月數(shù)組的時候，我們只需要知道本月最后一天是多少號，便知道創(chuàng)建一個多少位的數(shù)組。

在獲取時，有很多人使用了五花八門的方法，也有的人干脆為最后一天建立兩個12位的數(shù)組，將最后一天放進去，先判斷是不是閏年，再用數(shù)組取最后一天的值。

但其實new Date(Y,M,D),取D為0的時候能夠取到上一月的最后一天，也無需判斷是否是閏年，我偶然間發(fā)現(xiàn)的。有興趣的朋友可以追根溯源去找找原因。

let prevDate=new Date(this.year,this.month-1,0)//上月最后一天
let prevArr=[...Array(prevDate.getDay()+1).fill(prevDate.getDate())]//創(chuàng)建上月數(shù)組，填充最后一天
this.prev=prevArr.map((item,index)=>item-index).sort((a,b)=>a-b)//做數(shù)組處理

這里先是取到上月最后一天，再取星期，這樣就能計算出上月需要有幾位補充到當(dāng)月，取當(dāng)月第一天也可以。一周有7天，返回0~6的數(shù)，如果上月最后一天是星期二，看下windows的日歷是補了三天，我們prevDate.getDay()得到的是2，所以為此+1，之后就是填充最后一天，用map處理一下再排序，上一個月的數(shù)據(jù)就得到了。

下月補充進來的數(shù)據(jù)畢竟簡單，就不多說。完整代碼如下：

currentInfo(){
        let date=new Date()
        this.year=date.getFullYear()//當(dāng)年
        this.month=date.getMonth()+1//當(dāng)月
        let currentDate=new Date(this.year,this.month,0)//當(dāng)月最后一天
        let currentArr=[...Array(currentDate.getDate()).fill(1)]//創(chuàng)建當(dāng)月數(shù)組，填充1
        this.current=currentArr.map((item,index)=>item+index)//做數(shù)組處理
        /*上月*/
        let prevDate=new Date(this.year,this.month-1,0)//上月最后一天
        let prevArr=[...Array(prevDate.getDay()+1).fill(prevDate.getDate())]//創(chuàng)建上月數(shù)組，填充最后一天
        this.prev=prevArr.map((item,index)=>item-index).sort((a,b)=>a-b)//做數(shù)組處理
        /*下月*/
        let nextArr=[...Array(6-currentDate.getDay()).fill(1)]//創(chuàng)建下月數(shù)組，填充1
        this.next=nextArr.map((item,index)=>item+index)
    },  

這樣一個日歷的主要部分就完成了，和windows下的日歷對比下，一模一樣就說明沒錯

想要獲取上月的日歷，其實就是重新運行了currentInfo()函數(shù)，只是月份取得上月，那很簡單，傳參

currentInfo(year,month){
        let date=new Date()
        this.year=year||date.getFullYear()//當(dāng)年
        this.month=month||date.getMonth()+1//當(dāng)月
        let currentDate=new Date(this.year,this.month,0)//當(dāng)月最后一天
        let currentArr=[...Array(currentDate.getDate()).fill(1)]//創(chuàng)建當(dāng)月數(shù)組，填充1
        this.current=currentArr.map((item,index)=>item+index)//做數(shù)組處理
        /*上月*/
        let prevDate=new Date(this.year,this.month-1,0)//上月最后一天
        let prevArr=[...Array(prevDate.getDay()+1).fill(prevDate.getDate())]//創(chuàng)建上月數(shù)組，填充最后一天
        this.prev=prevArr.map((item,index)=>item-index).sort((a,b)=>a-b)//做數(shù)組處理
        /*下月*/
        let nextArr=[...Array(6-currentDate.getDay()).fill(1)]//創(chuàng)建下月數(shù)組，填充1
        this.next=nextArr.map((item,index)=>item+index)
    }

我們將函數(shù)進行如上改造，當(dāng)有年月參數(shù)傳入時，就使用參數(shù)；當(dāng)沒有年月參數(shù)傳入時，就使用系統(tǒng)時間的年月。之后只需要做兩個按鈕函數(shù)就行了

prevM(){
        let year,month
        if(this.month!==1){//不是一月，月份遞減，年份不變
            month=--this.month
            year=this.year
        }else{//否則年份遞減，月份變?yōu)?2
            month=12
            year=--this.year
        }   
        this.currentInfo(year,month)
    },
nextM(){
        let year,month
        if(this.month!==12){
            month=++this.month
            year=this.year
        }else{
            month=1
            year=++this.year
        } 
        this.currentInfo(year,month)
    },

該如何加當(dāng)天的樣式其實有很多方法，我是先找出當(dāng)天，然后和循環(huán)的index掛鉤，判斷是否需要加樣式
先在data中加入isDay這個數(shù)據(jù)

currentDay(){
        let date=new Date()                    
        if(this.year===date.getFullYear()&&this.month===date.getMonth()+1){//如果是當(dāng)年當(dāng)月
            this.isDay=date.getDate()-1//獲取到今天的號數(shù)，因為index是從0循環(huán)，所以這里-1
        }else{
            this.isDay=""
        }
    },

之后就是通過vue綁定樣式，當(dāng)（今天-1）=index，即:class="isDay===index?"active":"""給此添加一個active樣式

backDay(){                   
    this.currentInfo()
    this.currentDay()
}

 mounted(){
    this.currentInfo()
    this.currentDay()
}

利用生命周期函數(shù)進行初始化（這個應(yīng)該一開始就做）

https://github.com/yuyeqianxu...  
希望能幫助到和我一樣的小白朋友們，有bug麻煩反饋，謝謝！