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

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

本月的天數

截取上月的天數

截取下月天數

今天給一個樣式

上月、下月切換

回到今天

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

        

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

                
{{item}}
            
        
        

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

我主要是將日歷的天數分成了3部分，創建了3個數組來保存

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

接下來獲取本月的天數

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

當我們在創建本月數組的時候，我們只需要知道本月最后一天是多少號，便知道創建一個多少位的數組。

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

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

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

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

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

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

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

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

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

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

prevM(){
        let year,month
        if(this.month!==1){//不是一月，月份遞減，年份不變
            month=--this.month
            year=this.year
        }else{//否則年份遞減，月份變為12
            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)
    },

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

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

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

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

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

利用生命周期函數進行初始化（這個應該一開始就做）

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