VUE 根据当前时间,以周切换时间。

VUE根据当前时间,以周切换时间。

项目需求,根据当前时间,显示本周所有日期,点击左右按钮切换上下周。

			<ul class="days">
                  <li @click="weekPre" class="prev-btn">
                    <span class="hidden-sm-and-down"><i class="el-icon-arrow-left"></i></span>
                  </li>
                  <li
                    class="date-item"
                    @click="pick(day, index)"
                    v-for="(day, index) in days"
                    :key="index"
                    :class="{'active' :show==index}"
                    >
                     <div style="width:100%;height: 100%;background-color: #17C6AC;color:#fff;" v-if="day.getMonth() == new Date().getMonth() &&  day.getDate() == new Date().getDate()">
                        <!--天-->
                        <span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
                        <p>({{day | getWeekFormat}})</p>
                     </div>
                     <div style="width:100%;height: 100%;" v-else>
                        <!--天-->
                        <span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
                        <p>({{day | getWeekFormat}})</p>
                     </div>
                  </li>
                  <li @click="weekNext" class="next-btn">
                    <span class="hidden-sm-and-down"><i class="el-icon-arrow-right"></i></span>
                  </li>
                </ul>
.days {
  display: flex;
  justify-content: space-around;
}
.weeks ul li p {
  margin: 0 !important ;
  display: inline-block;
}
.weeks ul li {
  width: 180px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  cursor: pointer;
}
.weeks ul {
  padding: 0;
}
.prev-btn {
  margin-right: 35px;
}
.next-btn {
  margin-left: 35px;
}

ps:样式不对的话自己改改。

##data中定义
				currentYear: 1970, // 年份
                currentMonth: 1, // 月份
                currentDay: 1, // 日期
                currentWeek: 1, // 星期
                days: [],
##date下面定义一个周的过滤器
		filters: {
          	dateFormat(date) {
            	return moment(date).format("MM.DD");
          	},
          	getWeekFormat(date) {
            	const weeksObj = {
              	1: "周一",
              	2: "周二",
              	3: "周三",
              	4: "周四",
              	5: "周五",
              	6: "周六",
              	7: "周日",
            	};
            	let weekNumber = moment(date).isoWeekday();
            	return weeksObj[weekNumber];
         	 }
        },
 ## methods下定义时间过滤器
        formatDate(year, month, day) {
              const y = year;
              let m = month;
              if (m < 10) m = `0${m}`;
              let d = day;
              if (d < 10) d = `0${d}`;
              return `${y}-${m}-${d}`;
            },
 再定义初始化时间
 		initData(cur) {
              let date = "";
              if (cur) {
                date = new Date(cur);
              } else {
                date = new Date();
              }
              this.currentDay = date.getDate(); // 今日日期 几号
              this.currentYear = date.getFullYear(); // 当前年份
              this.currentMonth = date.getMonth() + 1; // 当前月份
              this.currentWeek = date.getDay(); // 1...6,0  // 星期几
              if (this.currentWeek === 0) {
                this.currentWeek = 7;
              }
              const str = this.formatDate(
                this.currentYear,
                this.currentMonth,
                this.currentDay
              ); // 今日日期 年-月-日
              this.days.length = 0;
              // 今天是周日,放在第一行第7个位置,前面6个 这里默认显示一周,如果需要显示一个月,则第二个循环为 i<= 35- this.currentWeek
              /* eslint-disabled */
              // 今天
              for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
                const d = new Date(str);
                d.setDate(d.getDate() - i);
                // console.log("y:" + d.getDate())
                // console.log('d: ', d);
                this.days.push(d);
              }
              // 这个星期
              for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
                const d = new Date(str);
                d.setDate(d.getDate() + i);
                this.days.push(d);
                // console.log('d1: ', d);
              }
            },
 再然后就是点击左右按钮切换时间了。
 		 // 上个星期
            weekPre() {
              const d = this.days[0]; // 如果当期日期是7号或者小于7号
              d.setDate(d.getDate() - 7);
              this.initData(d);
            },
            // 下个星期
            weekNext() {
              const d = this.days[6]; // 如果当期日期是7号或者小于7号
              d.setDate(d.getDate() + 7);
              this.initData(d);
            },

小白勿喷,还请大佬们多多指教。
借鉴:https://www.jb51.net/article/163995.htm。

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值