VUE篇之日历组件

1.简单日历组件展示

思路：根据当前月的第一天是星期几，来显示日期

<template>
  <div class="wrap">
    <el-button @click="preMonth">上个月</el-button>
    <el-tag>当前年份{{ curYear }}</el-tag>
    <el-tag>当前月份{{ curMonth }}</el-tag>
    <el-button @click="nextMonth">下个月</el-button>
    <div class="weeks">
      <div v-for="item in week" :key="item" class="week">{{ item }}</div>
    </div>
    <div class="days">
      <!-- 当月 -->
      <div v-for="item in curDays" :key="item + 'cur'" class="curday">{{ item }}</div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
moment.suppressDeprecationWarnings = true;
export default {
  data() {
    return {
      curYear: moment().year(), //当前年
      curMonth: moment().month() + 1, //当前月
      week: ['一', '二', '三', '四', '五', '六', '七'],
      firstDay: moment(`${moment().year()}-${moment().month() + 1}`)
        .startOf('month')
        .day(), //获取当月第一天是星期几;星期日为 0，星期六为 6
      curDays: moment().daysInMonth() //获取当月一共有多少天
    };
  },

  methods: {
    preMonth() {
      this.curMonth--;
      // 如果小于1表示上一年;重置日期
      if (this.curMonth < 1) {
        this.curYear--;
        this.curMonth = 12;
      }
      this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();
      this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();
      if (this.firstDay == 0) {
        this.firstDay = 7;
      }
    },
    nextMonth() {
      this.curMonth++;
      // 如果超过12表示下一年;重置日期
      if (this.curMonth > 12) {
        this.curYear++;
        this.curMonth = 1;
      }
      this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();
      this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();
      if (this.firstDay == 0) {
        this.firstDay = 7;
      }
    }
  }
};
</script>

<style lang="scss">
.wrap {
  width: 700px;
  height: 100%;
  .weeks {
    width: 100%;
    height: 50px;
    display: flex;
    .week {
      width: 100px;
      line-height: 50px;
      text-align: center;
      background: gainsboro;
    }
  }
  .days {
    display: flex;
    flex-wrap: wrap;
    .lastday,
    .curday {
      width: 100px;
      line-height: 50px;
      text-align: center;
    }
    .lastday {
      color: gold;
    }
  }
}
</style>

2.日历组件增强版------带有上个月或者下个月日期

较比上一版本，这个版本多了2个方法，主要用于更新上个月剩余日期，以及下个月最新日期

上个月日期：
// 获取上个月剩余天数
    getPreMonthDays() {
      if (this.firstDay == 1) return; //表示上个月无剩余天数
      let month = this.curMonth;
      let year = this.curYear;
      month--;
      if (month == 0) {
        year--;
        month = 12;
      }
      // 获取上个月的天数
      const days = moment(`${year}-${month}`).daysInMonth();
      this.preDays = days;
    },
 下个月日期：
// 获取下个月要显示的天数
    getNextMonthDays() {
      let month = this.curMonth;
      let year = this.curYear;
      // 获取当月最后一天是星期几
      const lastDay = moment(`${year}-${month}`).endOf('month').day();
      this.nextDays = lastDay == 0 ? 7 : lastDay;
    }

 整体代码：

<template>
  <div class="wrap">
    <el-button @click="preMonth">上个月</el-button>
    <el-tag>当前年份{{ curYear }}</el-tag>
    <el-tag>当前月份{{ curMonth }}</el-tag>
    <el-button @click="nextMonth">下个月</el-button>
    <div class="weeks">
      <div v-for="item in week" :key="item" class="week">{{ item }}</div>
    </div>
    <div class="days">
      <!-- 上个月 -->
      <div v-for="item in firstDay - 1" :key="item + 'pre'" class="lastday">
        {{ preDays - (firstDay - 1 - item) }}
      </div>
      <!-- 当月 -->
      <div v-for="item in curDays" :key="item + 'cur'" class="curday">{{ item }}</div>
      <!-- 下个月 -->
      <div v-for="item in 7 - nextDays" :key="item + 'next'" class="lastday">
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
moment.suppressDeprecationWarnings = true;
export default {
  data() {
    return {
      preDays: 30,
      nextDays: 7,
      curYear: moment().year(), //当前年
      curMonth: moment().month() + 1, //当前月
      week: ['一', '二', '三', '四', '五', '六', '七'],
      firstDay: moment(`${moment().year()}-${moment().month() + 1}`)
        .startOf('month')
        .day(), //获取当月第一天是星期几;星期日为 0，星期六为 6
      curDays: moment().daysInMonth() //获取当月一共有多少天
    };
  },
  mounted() {
    this.getPreMonthDays();
    this.getNextMonthDays();
  },
  methods: {
    preMonth() {
      this.curMonth--;
      // 如果小于1表示上一年;重置日期
      if (this.curMonth < 1) {
        this.curYear--;
        this.curMonth = 12;
      }
      this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();
      this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();
      if (this.firstDay == 0) {
        this.firstDay = 7;
      }
      // 显示上个月日期
      this.getPreMonthDays();
      this.getNextMonthDays();
    },
    nextMonth() {
      this.curMonth++;
      // 如果超过12表示下一年;重置日期
      if (this.curMonth > 12) {
        this.curYear++;
        this.curMonth = 1;
      }
      this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();
      this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();
      if (this.firstDay == 0) {
        this.firstDay = 7;
      }
      // 显示上个月日期
      this.getPreMonthDays();
      this.getNextMonthDays();
    },
    // 获取上个月剩余天数
    getPreMonthDays() {
      if (this.firstDay == 1) return; //表示上个月无剩余天数
      let month = this.curMonth;
      let year = this.curYear;
      month--;
      if (month == 0) {
        year--;
        month = 12;
      }
      // 获取上个月的天数
      const days = moment(`${year}-${month}`).daysInMonth();
      this.preDays = days;
    },
    // 获取下个月要显示的天数
    getNextMonthDays() {
      let month = this.curMonth;
      let year = this.curYear;
      // 获取当月最后一天是星期几
      const lastDay = moment(`${year}-${month}`).endOf('month').day();
      this.nextDays = lastDay == 0 ? 7 : lastDay;
    }
  }
};
</script>

<style lang="scss">
.wrap {
  width: 700px;
  height: 100%;
  .weeks {
    width: 100%;
    height: 50px;
    display: flex;
    .week {
      width: 100px;
      line-height: 50px;
      text-align: center;
      background: gainsboro;
    }
  }
  .days {
    display: flex;
    flex-wrap: wrap;
    .lastday,
    .curday {
      width: 100px;
      line-height: 50px;
      text-align: center;
    }
    .lastday {
      color: gold;
    }
  }
}
</style>

3.日历组件增强版------可选择区间日期

思路：通过clickCount记录点击区间次数，默认是0，点击第一次是1，第二次是2；如果clickCount==2重置clickCount=0

页面渲染：通过判断日期是否在选择区间的最大和最小之间，来更改背景色

相比较之前，更新的代码：

方法新增一个点击事件

selectDate(year, day) {
      this.clickCount++;
      const date = new Date(`${year}-${this.curMonth}-${day}`);
      if (this.clickCount == 1) {
        this.startTime = date;
      } else if (this.clickCount == 2) {
        this.endTime = date;
        this.clickCount = 0;
      }
      if (this.endTime && +this.startTime > +this.endTime) {
        [this.startTime, this.endTime] = [this.endTime, this.startTime];
      }
      // console.log(
      //   this.clickCount,
      //   moment(this.startTime).format('YYYY-MM-DD'),
      //   moment(this.endTime).format('YYYY-MM-DD')
      // );
    }
  computed: {
    isSelected() {
      return (year, day) => {
        const date = new Date(`${year}-${this.curMonth}-${day}`);
        return (
          (+this.startTime <= +date && +this.endTime >= +date) || +date == +this.startTime || +date == +this.endTime
        );
      };
    }
  },

整体代码：

<template>
  <div class="wrap">
    <el-button @click="preMonth">上个月</el-button>
    <el-tag>当前年份{{ curYear }}</el-tag>
    <el-tag>当前月份{{ curMonth }}</el-tag>
    <el-button @click="nextMonth">下个月</el-button>
    <div class="weeks">
      <div v-for="item in week" :key="item" class="week">{{ item }}</div>
    </div>
    <div class="days">
      <!-- 上个月 -->
      <div
        v-for="item in firstDay - 1"
        :key="item + 'pre'"
        :class="['lastday', { select: isSelected(curYear - 1, preDays - (firstDay - 1 - item)) }]"
        @click="selectDate(curYear - 1, preDays - (firstDay - 1 - item))"
      >
        {{ preDays - (firstDay - 1 - item) }}
      </div>
      <!-- 当月 -->
      <div
        v-for="item in curDays"
        :key="item + 'cur'"
        :class="['curday', { select: isSelected(curYear, item) }]"
        @click="selectDate(curYear, item)"
      >
        {{ item }}
      </div>
      <!-- 下个月 -->
      <div
        v-for="item in 7 - nextDays"
        :key="item + 'next'"
        :class="['lastday', { select: isSelected(curYear + 1, item) }]"
        @click="selectDate(curYear + 1, item)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
moment.suppressDeprecationWarnings = true;
export default {
  data() {
    return {
      startTime: null, //记录区间开始时间
      endTime: null, //记录区间结束时间
      clickCount: 0, //用于记录点击次数
      preDays: 30, //上个月天数
      nextDays: 7, //下个月天数
      curYear: moment().year(), //当前年
      curMonth: moment().month() + 1, //当前月
      week: ['一', '二', '三', '四', '五', '六', '七'],
      firstDay: moment(`${moment().year()}-${moment().month() + 1}`)
        .startOf('month')
        .day(), //获取当月第一天是星期几;星期日为 0，星期六为 6
      curDays: moment().daysInMonth() //获取当月一共有多少天
    };
  },
  computed: {
    isSelected() {
      return (year, day) => {
        const date = new Date(`${year}-${this.curMonth}-${day}`);
        return (
          (+this.startTime <= +date && +this.endTime >= +date) || +date == +this.startTime || +date == +this.endTime
        );
      };
    }
  },
  mounted() {
    this.getPreMonthDays();
    this.getNextMonthDays();
  },
  methods: {
    preMonth() {
      this.curMonth--;
      // 如果小于1表示上一年;重置日期
      if (this.curMonth < 1) {
        this.curYear--;
        this.curMonth = 12;
      }
      this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();
      this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();
      if (this.firstDay == 0) {
        this.firstDay = 7;
      }
      // 显示上个月日期
      this.getPreMonthDays();
      this.getNextMonthDays();
    },
    nextMonth() {
      this.curMonth++;
      // 如果超过12表示下一年;重置日期
      if (this.curMonth > 12) {
        this.curYear++;
        this.curMonth = 1;
      }
      this.curDays = moment(`${this.curYear}-${this.curMonth}`).daysInMonth();
      this.firstDay = moment(`${this.curYear}-${this.curMonth}`).startOf('month').day();
      if (this.firstDay == 0) {
        this.firstDay = 7;
      }
      // 显示上个月日期
      this.getPreMonthDays();
      this.getNextMonthDays();
    },
    // 获取上个月剩余天数
    getPreMonthDays() {
      if (this.firstDay == 1) return; //表示上个月无剩余天数
      let month = this.curMonth;
      let year = this.curYear;
      month--;
      if (month == 0) {
        year--;
        month = 12;
      }
      // 获取上个月的天数
      const days = moment(`${year}-${month}`).daysInMonth();
      this.preDays = days;
    },
    // 获取下个月要显示的天数
    getNextMonthDays() {
      let month = this.curMonth;
      let year = this.curYear;
      // 获取当月最后一天是星期几
      const lastDay = moment(`${year}-${month}`).endOf('month').day();
      this.nextDays = lastDay == 0 ? 7 : lastDay;
    },
    selectDate(year, day) {
      this.clickCount++;
      const date = new Date(`${year}-${this.curMonth}-${day}`);
      if (this.clickCount == 1) {
        this.startTime = date;
      } else if (this.clickCount == 2) {
        this.endTime = date;
        this.clickCount = 0;
      }
      if (this.endTime && +this.startTime > +this.endTime) {
        [this.startTime, this.endTime] = [this.endTime, this.startTime];
      }
      // console.log(
      //   this.clickCount,
      //   moment(this.startTime).format('YYYY-MM-DD'),
      //   moment(this.endTime).format('YYYY-MM-DD')
      // );
    }
  }
};
</script>

<style lang="scss">
.wrap {
  width: 700px;
  height: 100%;
  .weeks {
    width: 100%;
    height: 50px;
    display: flex;
    .week {
      width: 100px;
      line-height: 50px;
      text-align: center;
      background: gainsboro;
    }
  }
  .days {
    display: flex;
    flex-wrap: wrap;
    .lastday,
    .curday {
      width: 100px;
      line-height: 50px;
      text-align: center;
      cursor: pointer;
    }
    .lastday {
      color: gold;
    }
    .select {
      background: pink;
      color: #fff;
    }
  }
}
</style>

4.日历组件增强版------可自定义日期内容

未完待续

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/243936.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

解决msvcr120.dll文件丢失问题

解决msvcr120.dll文件丢失问题

项目场景&#xff1a; 在VMware虚拟机中安装win7家庭版系统&#xff0c;安装MySQL数据库&#xff0c;部署项目文件。 问题描述 安装MySQL数据库过程中提示“msvcr120.dll文件丢失”。 原因分析&#xff1a; 提示丢失msvcr120.dll文件&#xff0c;我们首先要到C:\Windows\Sys…
阅读更多...
Windows server 2016 如何禁止系统自动更新

Windows server 2016 如何禁止系统自动更新

1.打开“运行”&#xff0c;输入cmd&#xff0c;点击“确定”。 2.输入sconfig&#xff0c;然后按回车键。 3.输入5&#xff0c;然后按回车键。 4.示例需要设置为手动更新&#xff0c;即输入M&#xff0c;然后按回车键。 5.出现提示信息&#xff0c;点击“确定”即可。
阅读更多...
【owt-server】清理日志：owt、srs、ffmpeg

【owt-server】清理日志：owt、srs、ffmpeg

运行一段时间后，云主机的磁盘满了owt的日志和 srs的日志比较多。查看日志文件占用: du 通过命令du -h –max-depth=1 *，可以查看当前目录下各文件、文件夹 关闭owt-server dist# ./bin/stop-all.sh root@k8s-master-2K4G:~/p2p/zdsvr-20201229/dist# ./bin/stop-all.sh stopp…
阅读更多...
JMeter定时器

JMeter定时器

JMeter定时器 一、同步定时器1、场景2、位置3、参数4、使用 二、常数吞吐量定时器1、场景2、作用3、位置4、参数 三、固定定时器1、场景2、位置3、用例 一、同步定时器 1、场景 1w人同时使用电商网站&#xff1a;相对并发&#xff0c;可用线程组实现1w人同时秒杀&#xff1a;绝…
阅读更多...
猫头虎博主深度探索：Amazon Q——2023 re:Invent大会的AI革新之星

猫头虎博主深度探索：Amazon Q——2023 re:Invent大会的AI革新之星

猫头虎博主深度探索&#xff1a;Amazon Q——2023 re:Invent大会的AI革新之星 授权说明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 亚马逊云科技开发者社区, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科…
阅读更多...
Xshell连接虚拟机、设置及使用技巧

Xshell连接虚拟机、设置及使用技巧

【环境系列】Linux虚拟机(Centos、Ubuntu)、云服务器&#xff1a;https://www.cnblogs.com/uncleyong/p/17874484.html Xshell连接虚拟机 登录服务器 查看ip&#xff1a;ip addr 安装xmanager&#xff0c;网盘中有安装包&#xff1b;也可以官网下载Xshell&#xff1a;https://…
阅读更多...
百度搜索展现服务重构：进步与优化

百度搜索展现服务重构：进步与优化

作者 | 瞭东 导读 本文将简单介绍搜索展现服务发展过程&#xff0c;以及当前其面临的三大挑战&#xff1a;研发难度高、架构能力欠缺、可复用性低&#xff0c;最后提出核心解决思路和具体落地方案&#xff0c;期望大家能有所收货和借鉴。 全文4736字&#xff0c;预计阅读时间12…
阅读更多...
冲压模具市场调研：2023年该行业发展现状及前景分析

冲压模具市场调研：2023年该行业发展现状及前景分析

汽车冲压件模具是汽车车身生产的重要工艺装备&#xff0c;是汽车换型的主要制约因素。汽车冲压件模具具有尺寸大、型面复杂、精度要求高等特点&#xff0c;属于技术密集型产品。 汽车冲压模具能快速精密地把材料直接加工成零件或半成品并通过焊接、铆接、拼装等工艺装配成零部件…
阅读更多...
勒索病毒最新变种.mallox勒索病毒来袭，如何恢复受感染的数据？

勒索病毒最新变种.mallox勒索病毒来袭，如何恢复受感染的数据？

导言&#xff1a; 威胁着我们数据安全的勒索病毒如.mallox已经变得愈发狡猾和具有挑战性。本文91数据恢复将深入介绍.mallox勒索病毒的特征、恢复受害数据的方法&#xff0c;以及一些预防措施&#xff0c;助您更好地应对这一威胁。 如果受感染的数据确实有恢复的价值与必要性&…
阅读更多...
Nacos配置Mysql数据库

Nacos配置Mysql数据库

目录 前言1. 配置2. 测试前言 关于Nacos的基本知识可看我之前的文章： Nacos基础版 从入门到精通云服务器 通过docker安装配置Nacos 图文操作以下Nacos的版本为1.1.3 1. 配置 对应的配置文件路径如下： 对应的application.properties为配置文件 需配置端口号 以及 mysql中的…
阅读更多...
c语言：初识指针

c语言：初识指针

目录 目录 目录 CPU与内存协同工作 访问内存中的“房间” 基础数据类型怎样居住“房间” 取地址运算符 & 声明指针类型的变量 定义 指针类型 空间大小 小结 使用指针 取值运算符 * 指针类型的大小 强制转换指针类型 CPU与内存协同工作 以整型加法为例&…
阅读更多...
Vue3页面如何设置rem单位的依据“根font-size”的两种方式

Vue3页面如何设置rem单位的依据“根font-size”的两种方式

最近在对项目做整体的自适应。我们可以通过设置meta的viewport属性设置屏幕的缩放&#xff0c;但有时候&#xff0c;屏幕缩放了但字体大小也需要做相应的调整才能达到更好的自适应效果。我们很容易想到使用媒体查询rem来实现字体的自适应。 rem单位&#xff1a;“rem” 是 “ro…
阅读更多...
Linux学习教程（第十一章 Linux高级文件系统管理）二

Linux学习教程（第十一章 Linux高级文件系统管理）二

第十一章 Linux高级文件系统管理&#xff08;二&#xff09; 九、Linux如何判断磁盘配额是否生效&#xff1f; 我们的磁盘配额已经生效&#xff0c;接下来测试一下是否会限制我们的用户。以 lamp1 用户为例&#xff0c; 因为 lamp1 用户除容量被限制外&#xff0c;也限制了文…
阅读更多...
MyBatis 四大核心组件之 StatementHandler 源码解析

MyBatis 四大核心组件之 StatementHandler 源码解析

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…
阅读更多...
利用n_gram进行情感分析

利用n_gram进行情感分析

一、思路 二、关键步骤实现 1、利用tf-idf进行特征提取 详见利用tf-idf对特征进行提取-CSDN博客 2、利用svm进行模型训练 详见​​​​​​​​​​​​​​利用svm进行情感分析-CSDN博客
阅读更多...
大数据分析与应用实验任务十二

大数据分析与应用实验任务十二

大数据分析与应用实验任务十二 实验目的&#xff1a; 通过实验掌握spark机器学习库本地向量、本地矩阵的创建方法&#xff1b; 熟悉spark机器学习库特征提取、转换、选择方法&#xff1b; 实验任务&#xff1a; 一、逐行理解并参考编写运行教材8.3.1、8.3.3节各个例程代码…
阅读更多...
服务器数据恢复-raid5多块磁盘掉线导致上层卷无法挂载的数据恢复案例

服务器数据恢复-raid5多块磁盘掉线导致上层卷无法挂载的数据恢复案例

服务器数据恢复环境&#xff1a; 一台服务器中有一组由24块FC硬盘组建的raid5磁盘阵列&#xff0c;linux操作系统ext3文件系统&#xff0c;服务器上层部署有oracle数据库。 服务器故障&检测&#xff1a; raid5阵列中有两块硬盘出现故障掉线&#xff0c;导致服务器上层卷无法…
阅读更多...
中通快递查询，中通快递单号查询，并进行多次揽收分析

中通快递查询，中通快递单号查询，并进行多次揽收分析

批量查询中通快递单号的物流信息&#xff0c;并将其中的多次揽收件分析筛选出来。 所需工具&#xff1a; 一个【快递批量查询高手】软件 中通快递单号若干 操作步骤&#xff1a; 步骤1&#xff1a;运行【快递批量查询高手】软件&#xff0c;第一次使用的伙伴记得先注册&…
阅读更多...
RocketMQ容器化最佳实践

RocketMQ容器化最佳实践

前言 在上一篇文章基于RocketMQ实现分布式事务我们完成基于消息队列实现分布式事务&#xff0c;为了方便后续的开发和环境统一&#xff0c;我们决定将RocketMQ容器化部署到服务器上。所以这篇文章就来演示一下笔者基于docker-compose完成RocketMQ容器化的过程。 本篇文章为了…
阅读更多...
移远通信5G智能模组SG520B系列正式上线，为智能终端轻松提供强大多媒体功能

移远通信5G智能模组SG520B系列正式上线，为智能终端轻松提供强大多媒体功能

12月13日&#xff0c;全球领先的物联网整体解决方案供应商移远通信宣布&#xff0c;正式推出新一代 5G Sub-6GHz智能模组SG520B系列。 SG520B系列支持5G、Wi-Fi 6E和蓝牙等多种连接技术&#xff0c;且多媒体功能强大&#xff0c;推入市场后将可直接满足智能网关、智慧工业、智慧…
阅读更多...
最新文章

Copyright @ 2022~2023