vue-week-picker实现支持按周切换的日历

本文实例为大家分享了vue-week-picker实现按周切换的日历的具体代码，供大家参考，具体内容如下

vue-week-picker

安装

npm install vue-week-picker --save-dev

DEMO

原生：线上DEMO
与element-ui结合使用：线上DEMO

功能

自适应式按周切换
与DatePicker日期选择器使用

结合Element-ui使用

效果

与vue-element结合组件，请转到链接

使用

<VueWeekPicker @dateValue="dateValue" />
Or
<vue-week-picker @dateValue="dateValue" />
import VueWeekPicker from 'vue-week-picker';
export default {
 components: {
 VueWeekPicker
 }
}
Or
export default {
 components: {
 'vue-week-picker': VueWeekPicker
 }
}

代码

<template>
 <div class="date">
 <el-row>
 <el-col :span="24">
 <div class="weeks">
  <!-- 日期 -->
  <ul class="days">
  <li @click="weekPre" class="prev-btn">
  <i class="fa fa-angle-left fa-icon" aria-hidden="true"></i>
  <span class="hidden-sm-and-down" style="margin-left: 5px;">上一周</span>
  </li>
  <li
  @click="pick(day, index)"
  v-for="(day, index) in days"
  :key="index"
  :class="{selected:index == tabIndex}"
  >
  <!--本月-->
  <span v-if="day.getMonth()+1 != currentMonth" class="other-month item-wrapper">
  <p>{{day | getWeekFormat}}</p>
  <span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
  </span>
  <span v-else>
  <!--今天-->
  <span
   v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()"
   class="today-item"
  >今天</span>
  <span class="item-wrapper" v-else>
   <p>{{day | getWeekFormat}}</p>
   <span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
  </span>
  </span>
  </li>
  <li @click="weekNext" class="next-btn">
  <span class="hidden-sm-and-down" style="margin-right: 5px;">下一周</span>
  <i class="fa fa-angle-right fa-icon" aria-hidden="true"></i>
  </li>
  <li>
  <span>
  <el-date-picker
   class="right-pick-btn"
   style="width: 100%"
   @change="pickDate"
   v-model="value1"
   type="date"
   placeholder="按日期查询"								 
 1/3    1 2 3 下一页 尾页