仿造element calardar 製作可填充日曆- 解決不能跨兩個月選擇日期渲染日曆問題
阿新 • • 發佈：2022-02-11
用vue和element開發的一套日曆系統，日曆內包含所篩選時間的具體時間事宜和資料。發現element自帶的calandar元件沒有支援跨兩個月時間選擇的支援。
於是自制了一個，實現思路很簡單：
1：利用ement 時間區間選擇控制元件，把所選時間區間依次排開放到一個數組內.
2：遍歷陣列，進行渲染，這裡靈活可控佈局都可自定義更改樣式。
3：因為還需要帶星期幾，根據渲染的時間日曆日期進行星期幾轉換為周幾
4：因為選擇開始時間不是固定的，可能是週一也可能週五等，所以要固定週日在第一個週一第二個，一行正好展示一週，就要做些處理
5：這裡方便計算直接在前面安插從週日開始安插，直到當前選中的日期的周天數為止。這樣只要第一行符合，後面會自動正確排列因為都是一行七天。
具體程式碼：
要用到的幾個核心時間方法：
一：
根據起始日期和結束日期獲取時間段陣列
// 根據起始日期和結束日期獲取時間段陣列 getAllDate(day1, day2) { var getDate = function(str) { var tempDate = new Date(); var list = str.split("-"); tempDate.setFullYear(list[0]); tempDate.setMonth(list[1] - 1); tempDate.setDate(list[2]); return tempDate; } var date1 = getDate(day1); var date2 = getDate(day2); if (date1 > date2) { var tempDate = date1; date1= date2; date2 = tempDate; } date1.setDate(date1.getDate() + 1); var dateArr = []; var i = 0; while (!(date1.getFullYear() == date2.getFullYear() && date1.getMonth() == date2.getMonth() && date1.getDate() == date2.getDate())) { var dayStr = date1.getDate().toString(); if (dayStr.length == 1) { dayStr = "0" + dayStr; } var monthStr = (date1.getMonth() + 1) < 10 ? "0" + (date1.getMonth() + 1) : date1.getMonth() + 1; dateArr[i] = date1.getFullYear() + "-" + monthStr + "-" + dayStr; i++; date1.setDate(date1.getDate() + 1); } dateArr.splice(0, 0, day1) dateArr.push(day2); return dateArr; }
二：
// 根據日期顯示當天的是周幾 incomeDetail(date) { var mydate = new Date(date) var weekend = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; return weekend[mydate.getDay()] },
三：
// 插入的空資料時間 fnthisweek() { var firstweek = this.incomeDetail(this.resvaluedate[0]) console.log(firstweek) var mydate = new Date(this.resvaluedate[0]) var thisweekind = mydate.getDay() console.log(thisweekind) this.kongweek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; this.kongweek.splice(thisweekind) // 直接擷取陣列,只保留當前日期前的星期 console.log(this.kongweek) },
html 展示：
<el-card style="margin:10px auto;width:100%;"> <ul class="box graybox" v-for="(v,i) in kongweek" :key="i*923+2*Math.random()"> <li> <p>{{v}}</p> </li> </ul> <ul class="box" v-for="(v,i) in resvaluedate" :key="i"> <li> <p>{{incomeDetail(v)}}</p> <p>時間：{{v}}</p> <p>這裡是具體內容 介面資料</p> </li> </ul> </el-card>
這樣就可以了，剩下的就很簡單了，進行具體的資料渲染，根據時間資料介面進行細節佈局
整體程式碼：
<template>
<div class="hello">
<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="開始日期"
end-placeholder="結束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" @change="changepicker">
</el-date-picker>
<el-card style="margin:10px auto;width:100%;">
<ul class="box graybox" v-for="(v,i) in kongweek" :key="i*923+2*Math.random()">
<li>
<p>{{v}}</p>
</li>
</ul>
<ul class="box" v-for="(v,i) in resvaluedate" :key="i">
<li>
<p>{{incomeDetail(v)}}</p>
<p>時間：{{v}}</p>
<p>這裡是具體內容 介面資料</p>
</li>
</ul>
</el-card>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
value1: '',
resvaluedate: '',
kongweek: []
}
},
methods: {
// 插入的空資料時間
fnthisweek() {
var firstweek = this.incomeDetail(this.resvaluedate[0])
console.log(firstweek)
var mydate = new Date(this.resvaluedate[0])
var thisweekind = mydate.getDay()
console.log(thisweekind)
this.kongweek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
this.kongweek.splice(thisweekind) // 直接擷取陣列,只保留當前日期前的星期
console.log(this.kongweek)
},
// 根據日期顯示當天的是周幾
incomeDetail(date) {
var mydate = new Date(date)
var weekend = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
return weekend[mydate.getDay()]
},
// 改變時間事件
changepicker(v) {
console.log(v)
this.resvaluedate = this.getAllDate(v[0], v[1])
this.fnthisweek()
},
// 根據起始日期和結束日期獲取時間段陣列
getAllDate(day1, day2) {
var getDate = function(str) {
var tempDate = new Date();
var list = str.split("-");
tempDate.setFullYear(list[0]);
tempDate.setMonth(list[1] - 1);
tempDate.setDate(list[2]);
return tempDate;
}
var date1 = getDate(day1);
var date2 = getDate(day2);
if (date1 > date2) {
var tempDate = date1;
date1 = date2;
date2 = tempDate;
}
date1.setDate(date1.getDate() + 1);
var dateArr = [];
var i = 0;
while (!(date1.getFullYear() == date2.getFullYear() &&
date1.getMonth() == date2.getMonth() &&
date1.getDate() == date2.getDate())) {
var dayStr = date1.getDate().toString();
if (dayStr.length == 1) {
dayStr = "0" + dayStr;
}
var monthStr = (date1.getMonth() + 1) < 10 ? "0" + (date1.getMonth() + 1) : date1.getMonth() + 1;
dateArr[i] = date1.getFullYear() + "-" + monthStr + "-" +
dayStr;
i++;
date1.setDate(date1.getDate() + 1);
}
dateArr.splice(0, 0, day1)
dateArr.push(day2);
return dateArr;
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.box {
/* max-width: 250px; */
width: 14.1%;
height: 300px;
background: #F0F7FF;
float: left;
border: 1px solid #F0F0F0;
}
.box.graybox{
background:#fbfdff;
color:#ccc;
}
</style>
示例：