首页 前端知识 vue-element-ui日期组件--默认一周时间,选择一周某一天默认周一到周日

vue-element-ui日期组件--默认一周时间,选择一周某一天默认周一到周日

2024-02-28 11:02:24 前端知识 前端哥 909 798 我要收藏

日期组件–默认一周时间,选择一周某一天默认周一到周日

1.type=week

<el-date-picker :format="startDate + ' 至 ' + endDate"
v-model="weeklyDate"
type="week"
:clearable="false"
:picker-options="{'firstDayOfWeek': 1}"
@change="newDateWeekHandle"
placeholder="选择周"
style="width: 300px">
</el-date-picker>
复制

2.模板

data(){
return {
weeklyDate:''
}
}
复制

3.methods

getDateWeek () {
const now = new Date();
const nowTime = now.getTime();
const day = now.getDay();
const oneDayTime = 24 * 60 * 60 * 1000;
const mondayTime = nowTime - (day - 2) * oneDayTime;//默认是周二
this.weeklyDate = new Date(mondayTime);
console.log(this.weeklyDate, ' this.weeklyDate');
this.newDateWeekHandle();
},
newDateWeekHandle () {
console.log(this.weeklyDate, 'weeklyDate');
const now = new Date(this.weeklyDate);
const nowTime = now.getTime();
const day = now.getDay();
const oneDayTime = 24 * 60 * 60 * 1000;
const mondayTime = nowTime - (day - 1) * oneDayTime;
const sundayTime = nowTime + (7 - day) * oneDayTime;
this.startDate = this.$moment(mondayTime).format('YYYY-MM-DD');
this.endDate = this.$moment(sundayTime).format('YYYY-MM-DD');
console.log(this.startDate, 'this.startDate ');
console.log(this.endDate, 'this.endDate ');
},
复制

感谢看完本文章,点个赞thanks~~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2885.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!