日历组件封装，js生成日历,日期选择，酒店日历选择

置顶是你前端伟哥

已于 2022-09-07 11:43:39 修改

阅读量490

点赞数 1

文章标签： javascript css css3

于 2022-08-16 16:55:45 首次发布

本文链接：https://blog.csdn.net/weixin_47705597/article/details/126369647

版权

好多项目需要用到日历，比如签到，酒店预订日期选择，
同事看别人手写日历感觉好厉害的样子，今天闲来没事也简单写一个日历生成。

在这里插入图片描述
选中图片时间

主要看js部分，二话不说上代码。代码有备注

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div
      id="app"
      class="flex-x-center flex-y-center"
      style="width: 100vw; height: 100vh"
      v-cloak
    >
      <div class="calendar">
        <div class="calendar-title flex-y-center flex-x-center">
          <div @click="switchDate('left')" class="p-x-30"><</div>
          <div>{{y}}-{{m}}</div>
          <div @click="switchDate('right')" class="p-x-30">></div>
        </div>
        <div class="calendar-content">
          <div class="week flex-y-center">
            <div class="item">日</div>
            <div class="item">一</div>
            <div class="item">二</div>
            <div class="item">三</div>
            <div class="item">四</div>
            <div class="item">五</div>
            <div class="item">六</div>
          </div>

          <div class="days">
            <div
              @click="clickDay(item)"
              v-for="(item,i) in calendarArr"
              :key="i"
              class="item"
              :class="checkClass(item)"
            >
              <div v-if="item.d">{{item.d}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      // 日期补零方法
      function makeUpForZero(num) {
        if (num < 10) {
          return `0${num}`;
        }
        return num;
      }

      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = makeUpForZero(m);
      var d = date.getDate();
      d = makeUpForZero(d);
      console.log(`${y}-${m}-${d}`);

      new Vue({
        el: '#app',
        data() {
          return {
            y,
            m,
            d,
            calendarArr: [],
            start: '',
            end: '',
          };
        },
        created() {
          this.createdCalendar();
        },
        computed: {
          checkClass() {
            return function (item) {
              if (!this.start && !this.end) return;
              if (item.date == this.start) return 'check-start';
              if (item.date == this.end) return 'check-end';
              if (item.date > this.start && item.date < this.end)
                return 'check-item';
            };
          },
        },
        watch: {
          y(val) {
            this.createdCalendar();
          },
          m() {
            this.createdCalendar();
          },
        },
        methods: {
          // 切换月份
          switchDate(type) {
            switch (type) {
              case 'left':
                if (this.m > 1) {
                  this.m = makeUpForZero(this.m - 1);
                } else {
                  this.y = this.y - 1;
                  this.m = 12;
                }
                break;

              default:
                if (this.m < 12) {
                  this.m = makeUpForZero(parseInt(this.m) + 1);
                } else {
                  this.y = makeUpForZero(parseInt(this.y) + 1);
                  this.m = '01';
                }
                break;
            }
          },
          // 生成日历
          createdCalendar() {
            let dayNum = new Date(this.y, this.m, 0).getDate();
            let calendarArr = [];
            console.log(dayNum, '当前月份天数循环创造当前日期数据');

            // 循环当月天数创建日历数组
            for (let index = 0; index < dayNum; index++) {
              let i = index + 1;
              let week = new Date(`${this.y}-${this.m}-${i}`).getDay();
              // 判断第一天星期几，向前插入多少空数据，也可向前插入上月最后几天数据。目前这里不做更多操作
              if (week && !index) {
                for (let index_1 = 0; index_1 < week; index_1++) {
                  calendarArr.push({});
                }
              }
              calendarArr.push({
                m: this.m,
                y: this.y,
                d: makeUpForZero(i),
                date: `${this.y}-${this.m}-${makeUpForZero(i)}`,
                week: new Date(this.y, this.m, i).getDay(),
              });
            }
            this.calendarArr = calendarArr;
            console.log(this.calendarArr, '重新生成的日历');
          },

          // 新增选中状态
          clickDay(item) {
            if (!this.start) {
              this.start = item.date;
            } else if (!this.end) {
              if (item.date < this.start) {
                let end = JSON.parse(JSON.stringify(this.start));
                this.start = item.date;
                this.end = end
              } else {
                this.end = item.date;
              }
            } else {
              this.end = '';
              this.start = item.date;
            }
          },
        },
      });
    </script>
  </body>
</html>

引入的css样式

.flex-x-center {
  display: flex;
  justify-content: space-between;
}
.flex-y-center {
  display: flex;
  align-items: center;
}
.p-x-30 {
  padding: 0 30px;
}
.calendar {
  border-radius: 10px;
  background: skyblue;
  overflow: hidden;
}
.calendar .calendar-title {
  background: pink;
}
.calendar .calendar-title > div {
  line-height: 50px;
}
.calendar .calendar-content .item {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.calendar .calendar-content .days {
  width: 350px;
  display: flex;
  flex-wrap: wrap;
}
.calendar .calendar-content .check-start {
  background: blue;
  border-radius: 5px;
  color: #fff;
}
.calendar .calendar-content .check-end {
  background: red;
  border-radius: 5px;
  color: #fff;
}
.calendar .calendar-content .check-item {
  background: #ccc;
}