elementui?日歷組件el-calendar使用總結(jié)
更新時(shí)間：2024年07月16日 14:23:59 作者：Hey,Girl
這篇文章主要介紹了elementui?日歷組件el-calendar使用總結(jié),引用dayjs處理日期,結(jié)合el-calendar完美實(shí)現(xiàn),需要的朋友可以參考下
功能：
1.日歷可以周視圖、月視圖切換；
2.點(diǎn)擊月視圖中日期可以切換到對(duì)應(yīng)周視圖；
3.點(diǎn)擊周視圖查看當(dāng)日對(duì)應(yīng)數(shù)據(jù)；
4.周、月視圖狀態(tài)下，點(diǎn)擊前后按鈕，分別切換對(duì)應(yīng)上下的周、月；
5.點(diǎn)擊回到今天，立即切回到周、月視圖下對(duì)應(yīng)的當(dāng)日；
引用dayjs處理日期，結(jié)合el-calendar完美實(shí)現(xiàn)。
要注意的是，日歷顯示周的話，傳的日期范圍要按照計(jì)算所在星期，比如我們的需求是周日為每周起始日，那么就要給周日的日期和周六日期為起始日，月視圖我不想再去計(jì)算日期范圍了，就直接用了:value，注意用的不是v-model而是value，因?yàn)関alue是單向的，v-model是雙向數(shù)據(jù)綁定了。
<template>
<div class="childContainer">
<CompBar name="XX日歷" iconName="rili.png" titleName="回到今天" @handleBarClick="nowCalendar">
<div class="kalendar">
<div class="kalendar-header">
<span class="current-monuth">
<i class="el-icon-caret-left" @click="showPrev"></i>
<i class="el-icon-caret-right" @click="showNext"></i>
</span>
<el-radio-group v-model="monthYear" size="mini">
<el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button>
</el-radio-group>
</div>
<CalendarMonth v-if="monthYear==='月'" :calendarValue="monthDate" :selectDay="dayDate" :dateList="dateList" @getPlanList="getplanList"></CalendarMonth>
<CalendarWeek v-else :rangeArr="dateRange" :selectDay="dayDate" :dateList="dateList"
@getPlanList="getplanList"></CalendarWeek>
</div>
<tabs :class="monthYear==='月'?'monthTabs':'weekTabs'" v-model="activePlan" v-loading="isLoading">
<el-tab-pane name="tabApplyEndPlan">
//此處是個(gè)列表
</el-tab-pane>
<el-tab-pane name="tabEndPlan"></el-tab-pane>
</tabs>
</template>
// 此處省略組件、接口引入
import dayjs from 'dayjs';
var weekplugin = require('dayjs/plugin/weekday');
dayjs.extend(weekplugin)
// 此處省略,直接放核心代碼
data(){
return{
activePlan:'tabApplyEndPlan',
monthYear:'周', // 周、月視圖切換，默認(rèn)顯示周
monthDate:'', // 傳后端參數(shù) YYYY-MM，查視圖上需要顯示點(diǎn)的日期
dayDate:'', // 傳后端參數(shù) YYYY-MM-DD，查視圖下面對(duì)應(yīng)的當(dāng)日數(shù)據(jù)列表
dateRange:[], // 周日歷，傳入周日歷視圖日期范圍
dateList:[], // 存放月數(shù)據(jù)，視圖中需要顯示點(diǎn)的日期
}
},
watch:{
// 比較簡(jiǎn)單，直接省略代碼了，記錄下邏輯
// 監(jiān)聽(tīng) monthDate、dayDate 值的改變，調(diào)用對(duì)應(yīng)接口
},
methods:{
showPrev() {
// 上個(gè)月
if (this.monthYear === '月') {
this.monthDate = dayjs(this.monthDate).add(-1, 'month').format('YYYY-MM');
// 需要判斷當(dāng)前選中日期是否屬于當(dāng)前月份
let _dayDate = dayjs(this.dayDate).format('YYYY-MM');
if (_dayDate === this.monthDate) {
// 計(jì)算本周第一天
let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');
// 計(jì)算本周最后一天
let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');
this.dateRange = [day1, day2];
} else {
let day1 = dayjs(this.monthDate).startOf('month').startOf('week').format('YYYY-MM-DD');
let day2 = dayjs(this.monthDate).startOf('month').endOf('week').format('YYYY-MM-DD');
this.dateRange = [day1, day2]
}
}
// 上星期
if (this.monthYear === '周') {
// 獲取當(dāng)前周視圖
let day1 = dayjs(this.dateRange[0]).add(-1, 'week').startOf('week').format('YYYY-MM-DD');
let day2 = dayjs(this.dateRange[1]).add(-1, 'week').endOf('week').format('YYYY-MM-DD');
this.monthDate = dayjs(this.dateRange[0]).add(-1, 'week').startOf('week').format('YYYY-MM');
this.dateRange = [day1, day2]
}
},
showNext() {
// 下個(gè)月
if (this.monthYear === '月') {
this.monthDate = dayjs(this.monthDate).add(1, 'month').format('YYYY-MM');
// 需要判斷當(dāng)前選中日期是否屬于當(dāng)前月份
let _dayDate = dayjs(this.dayDate).format('YYYY-MM');
if (_dayDate === this.monthDate) {
// 計(jì)算本周第一天
let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');
// 計(jì)算本周最后一天
let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');
this.dateRange = [day1, day2];
} else {
let day1 = dayjs(this.monthDate).endOf('month').startOf('week').format('YYYY-MM-DD');
let day2 = dayjs(this.monthDate).endOf('month').endOf('week').format('YYYY-MM-DD');
this.dateRange = [day1, day2]
}
}
// 下星期
if (this.monthYear === '周') {
// 獲取當(dāng)前周視圖
let day1 = dayjs(this.dateRange[0]).add(1, 'week').startOf('week').format('YYYY-MM-DD');
let day2 = dayjs(this.dateRange[1]).add(1, 'week').endOf('week').format('YYYY-MM-DD');
this.monthDate = dayjs(this.dateRange[0]).add(1, 'week').startOf('week').format('YYYY-MM');
this.dateRange = [day1, day2]
}
},
// 返回今日
nowCalendar() {
this.monthDate = dayjs(new Date()).format('YYYY-MM');
this.dayDate = dayjs(new Date()).format('YYYY-MM-DD');
let day1 = dayjs(new Date()).startOf('week').format('YYYY-MM-DD');
let day2 = dayjs(new Date()).endOf('week').format('YYYY-MM-DD');
this.dateRange = [day1, day2];
this.activePlan = 'tabApplyEndPlan'
},
// 周、月視圖日期被點(diǎn)擊處理方法
getPlanList(date) {
// console.log(this.monthYear)
// console.log(date)
this.dayDate = date.day;
// 點(diǎn)擊上、下月/周日期，不涉及視圖的切換
if (this.monthYear === '月') {
if (date.type === 'next-month') {
this.showNext()
}
if (date.type === 'prev-month') {
this.showPrev()
}
}
if (this.monthYear === '周') {
let _month = dayjs(date.day).format('YYYY-MM');
if (date.type === 'next-month') {
if (_month !== this.monthDate) {
this.monthDate = dayjs(date.day).format('YYYY-MM');
}
}
if (date.type === 'prev-month') {
if (_month !== this.monthDate) {
this.monthDate = dayjs(date.day).format('YYYY-MM');
}
}
}
if (date.type === 'current-month') {
this.monthYear = '周';
// 計(jì)算本周第一天
let day1 = dayjs(this.dayDate).startOf('week').format('YYYY-MM-DD');
// 計(jì)算本周最后一天
let day2 = dayjs(this.dayDate).endOf('week').format('YYYY-MM-DD');
// 計(jì)算點(diǎn)擊日期所在周第一天所屬月
this.monthDate = dayjs(day1).startOf('week').format('YYYY-MM');
this.dateRange = [day1, day2];
}
},
}
自定義日歷樣式（沒(méi)有用日歷原先的頭，全部自己重寫的，還不錯(cuò)）：
::v-deep .kalendar {
&-header {
text-align: center;
margin: 10px 16px 0 16px;
.current-monuth {
font-size: 16px;
letter-spacing: 0;
font-weight: 500;
margin-left: 15%;
color: #262626;
font-family: PingFangSC-Medium;
i {
cursor: pointer;
}
}
.el-radio-group {
float: right;
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
background: #ffffff;
box-shadow: -1px 0 0 0 transparent;
border: 1px solid rgba(199, 0, 11, 1);
font-family: PingFangSC-Medium;
font-size: 12px;
color: #c7000b;
letter-spacing: -0.04px;
font-weight: 500;
}
.el-radio-button__inner:hover {
color: #c7000b;
}
}
.calender-dot-box {
width: 100%;
bottom: -8px;
position: absolute;
span {
width: 6px;
height: 6px;
margin-right: 3px;
border-radius: 50%;
display: inline-block;
&:last-of-type {
margin-right: 0;
}
}
.endPlan {
background-color: #d61212;
}
.applyEndPlan {
background-color: #ffd100;
}
}
.el-calendar {
&__body {
padding: 10px 16px;
}
.is-today {
.el-calendar-day {
.calender-date {
width: 34px;
height: 34px;
margin: 0 auto;
color: #ff534f;
border-radius: 10px;
background: #fff;
box-shadow: none;
}
}
}
&__header {
display: none;
}
.current {
.el-calendar-day {
color: #262626;
}
}
.prev,
.next {
color: #bfbfbf;
}
&-day {
padding: 0;
font-weight: 700;
font-size: 16px;
letter-spacing: 0;
text-align: center;
position: relative;
transition: color 0.3s;
font-family: DINAlternate-Bold;
}
&-table {
th {
font-family: PingFangSC-Regular;
font-size: 16px;
color: #262626;
letter-spacing: 0;
text-align: center;
line-height: 34px;
font-weight: 400;
padding: 0;
&:last-of-type,
&:first-of-type {
color: #ff564e;
}
}
td {
border: none;
&.is-selected {
background-color: transparent;
}
}
.el-calendar-day {
height: 34px;
line-height: 34px;
&:hover {
background-color: transparent;
}
.calendar-isSelected {
width: 34px;
height: 34px;
margin: 0 auto;
color: #fff;
border-radius: 10px;
background: #ff534f;
box-shadow: 0px 0px 2px 0px rgba(238, 88, 64, 1);
}
}
}
}再看看子組件里面，先看月的：
<template>
<!-- 月日歷 -->
<el-calendar :value="calendarValue" :first-day-of-week="7" value-format="YYY-MM">
<template slot="dateCell" slot-scope="{ date, data }">
<div v-if="selectedDay === data.day" class="calendar-isSelected" @click="handleDate($event, date, data)">
{{ date.getDate() }}
</div>
<div v-else class="calender-date" @click="handleDate($event, date, data)">
{{ date.getDate() }}
</div>
<div class="calender-dot-box" @click="handleDate($event, date, data, 'dot')">
<template v-for="(item) in dateLists">
<span class="applyEndPlan" v-if="item.date === data.day && item.applyEndPlanNum > 0"></span>
<span class="endPlan" v-if="item.date === data.day && item.endPlanNum > 0"></span>
</template>
</div>
</template>
</el-calendar>
</template>
<script>
export default {
components: {},
name: "CalendarMonth",
props: {
selectedDay: {
type: String,
default: "",
},
calendarValue: {
type: String,
default: new Date(),
},
dateList: {
type: Array,
default: () => {
return [];
},
},
},
watch: {
dateList: {
handler(list) {
this.dateLists = list;
},
immediate: true,
},
},
data() {
return { monthDate: this.calendarValue, dateLists: [] };
},
created() { },
methods: {
handleDate(e, date, data) {
this.$emit("getPlanList", data);
},
},
};
</script>
<style lang="scss" scoped></style>周日歷組件：
<template>
<!-- 周日歷 -->
<el-calendar :range="rangeArr" :first-day-of-week="7" value-format="YYY-MM">
<template slot="dateCell" slot-scope="{date,data}">
<div v-if="selectedDay === data.day" class="calendar-isSelected" @click="handleDate($event, date, data)">
{{ date.getDate() }}</div>
<div v-else class="calender-date" @click="handleDate($event, date, data)">{{ date.getDate() }}</div>
<div class="calender-dot-box" @click="handleDate($event, date, data)">
<template v-for="(item) in dateList">
<span class="applyEndPlan" v-if="item.date === data.day && item.applyEndPlanNum > 0"></span>
<span class="endPlan" v-if="item.date === data.day && item.endPlanNum > 0"></span>
</template>
</div>
</template>
</el-calendar>
</template>
<script>
export default {
components: {}, name: 'CalendarWeek', props: {
selectedDay: {
type: String, default: '',
}, rangeArr: {
type: Array,
default: () => {
return [];
}
}, dateList: {
type: Array, default: () => {
return [];
}
}
}, data() {
return {
}
}, created() {
}, methods: {
handleDate(e, date, data) {
// console.log(e,date,data)
this.$emit('getPlanList', data)
},
}
}</script>
<style lang="scss" scoped></style>其實(shí)應(yīng)該把日歷組件二次封裝一下，就不用單獨(dú)再去寫周、月日歷子組件了，有空了可以試試。
不過(guò)不得不再吐槽一句，elementui的日歷組件，給提供的API真心的少，功能很簡(jiǎn)單。。。
最終效果圖：
月視圖效果圖：
月視圖下，有時(shí)候會(huì)出現(xiàn)整整一行的灰色日期，看起來(lái)不是很美觀，那么就需要操作dom，通過(guò)js判斷，操作dom來(lái)處理。大概思路就是，先通過(guò) document.querySelectorAll('.el-calendar-table__row') 獲取到所有.el-calendar-table__row的元素節(jié)點(diǎn)lists，然后循環(huán)遍歷這些節(jié)點(diǎn)，若其子元素class中含有.current，那么就說(shuō)明是帶有當(dāng)月的日期，則不改變樣式，若不含，則說(shuō)明這整行都是前\后月的日期，那么就可以把該.el-calendar-table__row的css里面加上屬性display:none。
周視圖效果圖：
到此這篇關(guān)于elementui 日歷組件el-calendar使用總結(jié)的文章就介紹到這了,更多相關(guān)elementui 日歷組件el-calendar使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
學(xué)習(xí)JavaScript設(shè)計(jì)模式(多態(tài))
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式，其中重點(diǎn)介紹多態(tài)，舉例說(shuō)明多態(tài)的思想，對(duì)多態(tài)進(jìn)行詳細(xì)剖析，感興趣的小伙伴們可以參考一下2015-11-11
淺談Javascript中的12種DOM節(jié)點(diǎn)類型
DOM是javascript操作網(wǎng)頁(yè)的接口，全稱為文檔對(duì)象模型(Document Object Model)。本文將主要說(shuō)明DOM節(jié)點(diǎn)類型，有需要的可以參考借鑒。2016-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序媒體組件的相關(guān)資料，包括視頻，音樂(lè)，圖片，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
Bootstrap基本插件學(xué)習(xí)筆記之輪播幻燈片(23)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之輪播幻燈片的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
js判斷手機(jī)端(Android手機(jī)還是iPhone手機(jī))
現(xiàn)在使用手機(jī)上網(wǎng)的人越來(lái)越多，一些下載網(wǎng)站會(huì)通過(guò)判斷不同系統(tǒng)手機(jī)來(lái)訪問(wèn)不同網(wǎng)頁(yè)，比如iPhone和Android。下面我們就來(lái)介紹一下如何用javascript判斷iPhone或Android手機(jī)訪問(wèn)2015-07-07
微信小程序使用input組件實(shí)現(xiàn)密碼框功能【附源碼下載】
這篇文章主要介紹了微信小程序使用input組件實(shí)現(xiàn)密碼框功能,涉及input組件布局設(shè)置相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
JS實(shí)現(xiàn)前端動(dòng)態(tài)分頁(yè)碼代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)前端動(dòng)態(tài)分頁(yè)碼代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
javascript insertAfter()定義與用法示例
這篇文章主要介紹了javascript insertAfter()定義與用法,實(shí)例分析了javascript節(jié)點(diǎn)后插入元素的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2016-07-07
給大家詳細(xì)講解一下單線程javascript的執(zhí)行問(wèn)題，以及通過(guò)實(shí)例分析用法。2017-11-11
關(guān)于驗(yàn)證碼在IE中不刷新的快速解決方法
下面小編就為大家?guī)?lái)一篇關(guān)于驗(yàn)證碼在IE中不刷新的快速解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09