之前寫過一篇js寫日曆面板的博文,是用table
渲染的,現在用vue寫,效果如下:
思路
1,第一行星期幾的表頭是固定的
2,判斷要查詢的月份渲染是5行還是6行,也就是35格還是42格
3,獲取要查詢的月份的1號是星期幾,小於這個星期幾前面的格子渲染空格
4,渲染從1號開始的後面的格子,最後一行的空格判斷日期大於要查詢的月份天數則渲染空格
解決
所有地方的註釋都寫了:
// 查詢
<el-form-item label="選擇日期:" prop="">
<el-date-picker
v-model="" // 這裏自己獲取當前日期就好了
type="month"
placeholder="選擇日期"
:editable="false"
:clearable="false"
@change="changeDate"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="warning" @click.native="onSearch" icon="el-icon-search" round>查詢</el-button>
</el-form-item>
// 日曆面板
<div class="clander">
<div id="contHead">
<div class="title"> // 擡頭年月
{{myyear}}年{{++mymouth}}月
</div>
<div class="week"> // 星期幾
<p v-for="item in weekday" :key="item">
{{item}}
</p>
</div>
</div>
<div id="contBox">
<div v-for="ite in mArr" :key="(ite+1)*Math.random()"> </div> // 1號之前的空格
<template v-for="item in contArr">
<div v-if="item > monthdays[mymouth]" :key="(item+2)*Math.random()"> </div> // 最後一行後面的空格(日期大於當月的天數則爲空)
<div v-else @click="changeDay(item)" class="dayBox" :key="(item+1)*2"> // 渲染日期,放進數值
<span class="day">{{item}}</span> // 日期數字
<span class="sum">{{allQuti[item-1]}}</span> <!-- 當天數值, 這裏-1因爲數組裏面日期是從1號開始的,值是從第0位開始 -->
</div>
</template>
</div>
<div class="contFoot">
合計:月累計用水 0 噸
</div>
</div>
weekday: new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六"),
monthdays: new Array(31,28,31,30,31,30,31,31,30,31,30,31), // 一月到12月的天數
mydate : new Date(), // 要查詢的日期,這裏我用的是element的type='month'的日期組件,它接收這樣的格式
m: '', // 當月1號星期幾
mArr: [], // 1號之前的格子
contArr: [], // 1號以後及1號的格子
computed: {
myyear() { // 獲取年
return this.mydate.getFullYear()
},
mymouth: { // 獲取月 這裏要使用set是因爲邏輯中對這個變量進行計算了,否則控制檯會報錯
get: function () { return this.mydate.getMonth() } ,
set: function (val) { }
}
},
mounted () {
// 初始化執行一次,獲取本月日曆面板
this.sumClander()
},
methods: {
// 日曆計算邏輯
sumClander () {
this.mArr = []
this.contArr = []
this.mydate.setDate(1); // 將要查詢的月份設爲1號
this.m = this.mydate.getDay() // 獲取要查詢的月的1號是星期幾
for (var d = 0; d < this.m; d++) { // 渲染1號之前的空格
this.mArr.push(d)
}
let cont = ''
this.m >= 5 && this.monthdays[this.mymouth] > 30 ? cont = 42 : cont = 35 // 判斷日曆是五行(35格子)還是六行(42格子)(判斷1號是否大於等於禮拜五並且當月天數是否大於30天)
for (var s = 1; s < cont - this.m + 1; s++) { // 從1號開始後面的格子,渲染日期
this.contArr.push(s)
}
if(this.myyear%4 == 0 && this.myyear%100 != 0 || this.myyear%400 == 0){ //判斷閏年2月=29天
this.monthdays[1] = 29;
}
},
// 日期組件change
changeDate(value) {
function checkTime(i){ // 時間補零
if(i<10){
i = '0'+i
}
return i
}
var date;
date = new Date(value)
this.yearTime = date.getFullYear()
this.monthTime = checkTime(date.getMonth()+1)
var changDate = this.yearTime + '-' + this.monthTime // 將change後的日期轉變爲例:2020-06 這種格式
this.mydate = new Date(changDate) // 將change後的日期賦值給日曆的數據源this.mydate
},
// 點擊查詢
onSearch () {
this.sumClander()
},
}
就醬實現邏輯,代碼還沒來得及優化,有些地方寫的有些粗糙,只是思路清晰就好了,可以自己調試優化,查詢一個月試試:
完美