vue+elementUI简单的实现日历功能，供大家参考，具体内容如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<div class="calender2"> <div class="date-headers"> <div class="date-header"> <div><el-button type="primary" @click="handlePrev"><i class="el-icon-arrow-left"></i>上一月</el-button></div> <div>{{ year }}年{{ month }}月{{ day }}日</div> <div><el-button type="primary" @click="handleNext">下一月<i class="el-icon-arrow-right"></i></el-button></div> <div><el-button type="primary" icon="el-icon-refresh-left" @click="refresh"></el-button></div> </div> </div> <div class="date-content"> <div class="week-header"> <div v-for="item in ['日','一','二','三','四','五','六']" :key=item >{{ item }} </div> </div> <div class="week-day"> <div class="every-day" v-for="item in 42" :key="item" @click="handleClickDay(item - beginDay)" > <div v-if="item - beginDay > 0 && item - beginDay <= curDays" :class="`${year}-${month}-${item - beginDay}` === `${year}-${month}-${day}` ? 'nowDay':''" >{{ item - beginDay }}</div> <div class="other-day" v-else-if="item - beginDay <= 0">{{ item - beginDay + prevDays }}</div> <div class="other-day" v-else>{{ item - beginDay -curDays }}</div> </div> </div> </div></div> |
## javascript
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<script> export default { name: "HelloWorld", data() { return { year: null, month: null, day: null, currentDay: null, currentYearMonthTimes: null,//当前年的月的天数 monthOneDay: null,//一个月中的某一天 curDate: null, prevDays: null,//上一月天数 } }, computed: { curDays() { return new Date(this.year, this.month, 0).getDate(); }, // 设置该月日期起始值（找到一号是在哪里） beginDay() { return new Date(this.year, this.month - 1, 1).getDay(); } }, created() { this.getInitDate(); this.currentYearMonthTimes = this.mGetDate(this.year, this.month); //本月天数 this.prevDays = this.mGetDate(this.year, this.month - 1); this.curDate = `${this.year}-${this.month}-${this.day}` console.log(this.curDate) }, methods: { refresh(){ //强制刷新页面 location. reload() }, handleClickDay(day){ //点击这一天，绑定点击事件 console.log( '形参传进来的',day) console.log( 'data里面的this.day',this.day) console.log( 'data里面的currentYearMonthTimes',this.currentYearMonthTimes) this.day = day if(this.day > this.currentYearMonthTimes){ this.$message.warning('不能选择超出本月的日期'); } console.log(day) }, computedDay() { const allDay = new Date(this.year, this.month, 0).getDate(); if (this.day > allDay) { this.day = allDay; } }, //设置页头显示的年月日 getInitDate() { const date = new Date(); this.year = date.getFullYear(); this.month = date.getUTCMonth() + 1; this.day = date.getDate(); }, // 如果要获取当前月份天数: mGetDate() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var d = new Date(year, month, 0); return d.getDate(); }, handlePrev() { if (this.month == 1) { this.month = 12 this.year-- } else { this.month-- } this.computedDay() }, handleNext() { if (this.month == 12) { this.month = 1 this.year++ } else { this.month++ } this.computedDay() } } }</script> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
<style scoped> * { margin: 0px; border: 0px; list-style: none; } .calender2 { border-radius: 4px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 396px; width: 420px; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) } .date-header { height: 60px; width: 422px; display: flex; align-items: center; justify-content: space-around; } .date-headers { height: 60px; width: 422px; display: flex; } .pre-month { position: absolute; display: inline-block; height: 0px; width: 0px; border: 15px solid; border-color: transparent rgb(35, 137, 206) transparent transparent; } .next-month { position: absolute; display: inline-block; height: 0px; width: 0px; border: 15px solid; border-color: transparent transparent transparent rgb(35, 137, 206); } .show-date { margin-left: 40px; margin-top: 0px; display: inline-block; line-height: 30px; text-align: center; width: 310px; color: rgb(35, 137, 206); } .week-header { color: #000000; font-size: 14px; text-align: center; line-height: 30px; } .week-header div { margin: 0; padding: 0; display: inline-block; height: 20px; width: 60px; } .every-day { display: inline-block; height: 50px; width: 60px; text-align: center; line-height: 50px; } .other-day { color: #ccc; } .nowDay { background: rgb(121, 35, 206); border: 1px solid #87c66d; } .active-day { /* padding: 2px */ /* border-sizing:content-box; */ border: 2px solid rgb(35, 137, 206); }</style> |
完成后的效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/m0_47668952/article/details/108724136
