vue+elementUI实现简单日历功能_elementui日历 - CSDN文库

172 浏览量更新于2023-05-04 收藏 53KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

vue+elementUI实现简单日历功能实现简单日历功能

vue+elementUI简单的实现日历功能，供大家参考，具体内容如下

<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

<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)

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38501916

粉丝: 1
资源: 935

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈