首页 前端知识 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
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!