使用:vue-calendar-component
由于需要对此组件的样式及功能的扩展
起步:
npm i vue-calendar-component --save
cnpm i vue-calendar-component --save //国内镜像
具体文档可以看vue-calendar-component官网 里面会有详细介绍
<Calendars
:textTop="['日','一','二','三','四','五','六']"
v-on:choseDay="clickDay"
:sundayStart='true'
:agoDayHide='this.outcome'
v-if='actives'
:markDate=this.arr //选取当前时间 数组
>
</Calendars>
js代码:
import Calendars from 'vue-calendar-component'
export default {
components: {
},
data() {
return {
arr:[]
}
} ,
methods:{
//点击获取当前时间的数据
clickDay (today) {
let date = today.split('/')
if (date[1].length < 2) {
date[1] = '0' + date[1]
}
if (date[2].length < 2) {
date[2] = '0' + date[2]
}
date = date.join('-')
this.params.time=date
//掉的接口 需要的话参考
this.$api.pageMyApi.invitationInfo(this.params).then(res => {
this.total = res.total
this.arrangementList = res.list
console.log(this.arrangementList)
})
console.log(date)
},
}
}
如图