我要评论效果图：
主要使用 moment.js 插件完成
html部分
<div class="day-content">
<div class="day-content-t">
<div>{{ monthval }}</div>
<div @click="oncalendar()">更多>></div>
</div>
<div class="day-content-b">
<div class="day-week">
<div v-for="item in weeklist">{{ item }}</div>
</div>
<div class="day-list">
<div v-for="item in daylist" :class="{ 'active' : todayval === item }">{{ item }}</div>
</div>
</div>
</div>
<!-- 日历 -->
<van-calendar v-model="calendarshow" :show-confirm="false" @confirm="onconfirm" color="#007aff" />js部分
<script>
import moment from 'moment';
export default {
components: {},
data() {
return {
weeklist: [],
daylist: [],
monthval: '',
todayval: '',
calendarshow: false,
}
},
created() {
this.monthval = moment().format('yyyy年mm月');
let month = moment().format('yyyy-mm-dd');
this.todayval = moment().format('dd');
this.dayinit(month,this.todayval);
},
methods: {
dayinit(month,day){
this.weeklist = [];
this.daylist = [];
// 初始化周
const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
const todayweek = weekdays[moment(month).day()];
const frontweek1 = weekdays[moment(month).subtract(3, 'days').day()];
const frontweek2 = weekdays[moment(month).subtract(2, 'days').day()];
const frontweek3 = weekdays[moment(month).subtract(1, 'days').day()];
const afterweek1 = weekdays[moment(month).add(1, 'days').day()];
const afterweek2 = weekdays[moment(month).add(2, 'days').day()];
const afterweek3 = weekdays[moment(month).add(3, 'days').day()];
this.weeklist.push(frontweek1,frontweek2,frontweek3,todayweek,afterweek1,afterweek2,afterweek3);
// 初始化日期
const today = day;
const frontday1 = moment(month).subtract(3, 'days').format('dd');
const frontday2 = moment(month).subtract(2, 'days').format('dd');
const frontday3 = moment(month).subtract(1, 'days').format('dd');
const afterday1 = moment(month).add(1, 'days').format('dd');
const afterday2 = moment(month).add(2, 'days').format('dd');
const afterday3 = moment(month).add(3, 'days').format('dd');
this.daylist.push(frontday1,frontday2,frontday3,today,afterday1,afterday2,afterday3);
},
oncalendar(){
this.calendarshow = true;
},
formatdate(date) {
this.monthval = `${date.getfullyear()}年${date.getmonth() + 1}月`;
let month = `${date.getfullyear()}-${date.getmonth() + 1}-${date.getdate()}`;
this.todayval = date.getdate();
this.dayinit(month,this.todayval);
},
onconfirm(date){
this.calendarshow = false;
this.formatdate(date)
},
}
}
</script>css部分
<style lang="scss" scoped>
.day-content{
background-color: #007aff;
padding: 0.3rem;
color: #fff;
.day-content-t{
display: flex;
flex-direction: row;
justify-content: space-between;
div:nth-child(1){
font-size: 16px;
}
div:nth-child(2){
font-size: 12px;
}
}
.day-content-b{
.day-week,.day-list{
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0.4rem 0;
div{
text-align: center;
width: 0.6rem;
height: 0.6rem;
line-height: 0.6rem;
}
}
.active{
background-color: #0054b0;
border-radius: 50%;
}
}
}
</style>至此完成！！！
测试有效！！！感谢支持！！！
到此这篇关于vue+vant实现7天日历展示并在切换日期时实时变换的文章就介绍到这了,更多相关vue vant切换日期时实时变换内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论