vue 周日历

需求：1.类似于手机上的周日历，显示周天-周一的。2.周日历能上翻下翻，并自动显示相应的年份和月份。3.点击相应的月份，显示当月第一周的周日历。4.选中某一固定日期，当前日期高亮。最终效果图项目结构如下html代码<!DOCTYPE html><html lang="en"><head>&amp

xiaoxiao无脸男

2654人浏览 · 2019-01-05 19:18:53

xiaoxiao无脸男 · 2019-01-05 19:18:53 发布

github地址：xiaoli0510/vue2-calender (github.com)

需求：

1.类似于手机上的周日历，显示周天-周一的。

2.周日历能上翻下翻，并自动显示相应的年份和月份。

3.点击相应的月份，显示当月第一周的周日历。

4.选中某一固定日期，当前日期高亮。

最终效果图

vue.js版本：Vue.js v2.7.16

项目结构如下

html代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="main" id="main">
      <header>
        <div class="year">
           <span class="pre" @click="sureYear(1)"><</span>
          <span>{{ year }} 年 </span>
          <span class="pre" @click="sureYear(2)">></span>
        </div>
        <div class="month">
          <div v-for="(item,index) in monthArr" :key="index" :class="{'active':item==month}" @click="sureMonth(item)">
            {{ item + 1 }}月
          </div>
        </div>
      </header>
      <div class="content">
            <span class="pre-week" @click="getData({'value':1})" ><</span>
            <span class="next-week" @click="getData({'value':2})">></span>
        <div class="wrap">
          <div v-for="(item,index) in arr" :key="index" :class="{'active':item.date==activeDay,'cur':item.date==today}" @click="sureDay(item.date)">
            {{ item.day }}
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>

index.css代码

.main {
    width: 50%;
    min-width: 443px;
    border: 1px solid #000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    }
    .year img {
    width: 20px;
    vertical-align:middle;
    }
    .year span {
    vertical-align: middle;
    }
    
    .pre {
        cursor: pointer;
        transform: rotate(180deg);
    }
    .pre-week{
        float: left;
        margin-top: 15px;
        cursor: pointer;
    }
    .next-week{
        float: right;
        margin-top: 15px;
        cursor: pointer;
    }
    .month{
    height:40px;
    }
    .month>div {
    float:left;
    width: 8.3%;
    line-height: 40px;
    border: 1px solid;
    box-sizing: border-box;
    cursor:pointer;
    }
    .month>div.active {
    border: 1px solid red;
    color: red;
    }
    .wrap {
    margin-left: 20px;
    margin-right: 20px;
    height: 50px;
    }
    .wrap>div{
    float:left;
    width: 14.28%;
    border: 1px solid #ece1e1;
    box-sizing: border-box;
    line-height: 50px;
    cursor:pointer;
    }
    .wrap>div.cur {
    border: 1px solid green;
    color: green;
    }
    .wrap>div.active {
    border: 1px solid red;
    color: red;
    }

index.js代码

var vm = new Vue({
    el: "#main",
    data: {
        today: "",
        activeDay: "",
        year: "",
        month: "",
        day: "",
        count: 0, //前一周后一周点击次数
        arr: [], //周日历,
        monthArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], //月份
        sureMonthFlag: false, //是否初始化月份
        sureYearFlag: false, //是否初始化年份
        selMonth: '',
        selYear: '',
    },
    created: function () {
        this.getData();
        this.getToday();
    },
    methods: {
        getToday: function () {
            var date = new Date();
            var year = date.getFullYear(); //年
            var month = date.getMonth(); //月 从0开始 0=》1月 1=》2月
            var day = date.getDate(); //日
            this.today = year + "," + month + "," + day;
        },
        getData: function (obj) {
            var date = new Date();
            if (this.sureMonthFlag) {
                date = new Date(this.selYear, this.selMonth, 1);
            }
            if (this.sureYearFlag) {
                date = new Date(this.selYear, this.selMonth, 1);
            }
            if (obj) {
                if (obj.value == '1') { //前一周
                    this.count--;
                } else if (obj.value == '2') { //后一周
                    this.count++;
                }
            }
            var year = date.getFullYear(); //年
            var month = date.getMonth(); //月 从0开始 0=》1月 1=》2月
            var day = date.getDate(); //日
            this.day = day;
            var weekDay = date.getDay(); //是本周的第几天
            this.getWeek(year, month, day, weekDay);
        },
        getWeek: function (year, month, day, weekDay) {
            this.arr = [];
            for (var i = 0; i < 7; i++) {
                var temDate = new Date(year, month, day - weekDay + i + this.count * 7);
                var temYear = temDate.getFullYear(); //年
                var temMonth = temDate.getMonth(); //月 从0开始 0=》1月 1=》2月
                var temDay = temDate.getDate(); //日
                var temDate = temYear + "," + temMonth + "," + temDay;
                var obj = {
                    "date": temDate,
                    "year": temYear,
                    "month": temMonth,
                    "day": temDay
                };
                this.arr.push(obj);
            }
            if (this.sureMonthFlag) {
                this.year = this.arr[6].year; //周日历数组的最后一个值的year为当前year
            } else {
                this.selYear = this.year = this.arr[6].year; //周日历数组的最后一个值的year为当前year
            }
            if (this.sureMonthFlag) {
                this.month = this.arr[6].month; //周日历数组的最后一个值的month为当前month
            } else {
                this.selMonth = this.month = this.arr[6].month; //周日历数组的最后一个值的month为当前month
            }
            this.month = this.arr[6].month; //周日历数组的最后一个值的month为当前month
            this.day = this.arr[6].day; //周日历数组的最后一个值的day为当前day
        },
        //确定日期
        sureDay: function (value) {
            this.activeDay = value;//根据此值去发送请求即可
        },
        //确定月份
        sureMonth: function (item) {
            this.count = 0;
            this.selMonth = item;
            this.sureMonthFlag = true;
            this.sureYearFlag = false;
            this.selYear = this.year;
            this.getData();
        },
        //确定年份
        sureYear: function (value) {
            this.count = 0;
            this.sureYearFlag = true;
            this.sureMonthFlag = false;
            this.selMonth = this.month;
            if (value == 1) {
                this.year--;
            } else {
                this.year++;
            }
            this.selYear = this.year;
            this.getData();
        }
    }
})

难点:主要是交互时候的年月日，比如现在是2019，点击6月份，那么默认日期变为2019.6.1，点击count变为0。年份与月份类似。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^