小白成長日記：寫個日曆

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

完成圖

思路

• 本月的天數
• 截取上月的天數
• 截取下月天數
• 今天給一個樣式
• 上月、下月切換
• 回到今天

大體須要完成的東西有以上東西

html部分

<div id="calendar">
        <div class="top">
            <div class="YM"><span class="left" @click="prevM">&lt;</span><p>{{year}}-{{month}}<span class="back" @click="backDay">今</span></p><span class="right"  @click="nextM">&gt;</span></div>
            <div class="weeks">
                <div class="week" v-for="(item,index) in weeks" :key="index">{{item}}</div>
            </div>
        </div>
        <div class="body">
            <div class="prev" v-for="(item,index) in prev">{{item}}</div>
            <div class="current" v-for="(item,index) in current" :class="isDay===index?'active':''">{{item}}</div>
            <div class="next" v-for="(item,index) in next">{{item}}</div>
        </div>
    </div>

本月天數

我主要是將日曆的天數分紅了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麻煩反饋，謝謝！