VUE篇之日历组件

已于 2023-12-14 14:17:20 修改
阅读量6.5k 收藏 15
点赞数 9
文章标签： vue.js javascript 前端
于 2023-12-13 17:36:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ae_pppppp/article/details/134975203
版权

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.日历组件增强版------可自定义日期内容

未完待续

这个一个非常哈
关注
  • 9
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue实现一个炫酷的日历组件
10-17
公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。下面小编给大家带来了基于vue实现一个炫酷的日历组件，感兴趣的朋友参考下吧
Vue3+Typescript日历组件
07-29
本篇将详细介绍如何利用Vue3和TypeScript来创建一个功能丰富的日历组件。 首先，我们从标题"Vue3+Typescript日历组件"出发，理解其核心是创建一个基于Vue3的组件，且使用了TypeScript作为编程语言。TypeScript是...
VUE实现日历组件功能
08-31
本篇文章主要介绍了VUE实现日历组件功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【vue2 + vant UI】基于Vant的日历组件封装可翻页选年和月的日历组件
weixin_44482361的博客
06-12 556
vant的日历组件加上翻页功能
vue手搓自定义日历, 同步节假日
A_lrb0803的博客
09-27 2258
满足节假日配置, 手搓日历
vue3使用fullcalendar V6日历插件，基础使用！
weixin_51338875的博客
04-18 2283
【代码】vue3使用fullcalendar V6日历插件，基础使用！ 最新V6 API大全！！！
Vue2.0+Element实现日历组件
在写作的路上持续输出。
01-28 2063
前端vue日历组件
vue日历排班组件_vue.js日历组件
weixin_28904055的博客
02-22 1268
直接上代码<<<{{year}}年{{month}}月>>>{{item.name}}{{item2}}{{item2}}export default {name: "calender",data(){return {year:2019, // 设置当前年份month:8, // 设置当前月份day:1, // 设置当前号数all:[], /...
vue工作日历的组件
高艳艳的博客！
04-27 301
【代码】vue工作日历的组件。
vue 绘制提醒日历组件
qw_cui的博客
04-25 1845
-.- 废话补多说，直接上代码 <template> <div class="calendar"> <slot name="header"> <div class="top"> <div class="current">{{ time }}</div> <div class="box"> <div class="btn" @click="b
vue日历组件
wf280496的博客
03-18 1511
*
基于Vue3和TypeScript的日历日程组件设计源码
05-31
日历日程组件项目源码，共30个文件，采用Vue3、TypeScript和HTML等语言开发，涉及多种文件类型如Vue组件、TypeScript...该项目是一个基于Vue3和TypeScript的日历日程组件，旨在提供一个高效、稳定的日程管理解决方案。
基于Vue2-Calendar改进的日历组件（含中文使用说明）
10-17
本文将详细介绍一个基于Vue2-Calendar组件进行改进的日历组件，该组件在原版基础上进行了多项优化，以满足更多样化的使用需求。首先，让我们了解一下Vue2-Calendar的基础知识。 Vue2-Calendar是一款适用于Vue.js...
vue 封装日历组件
qq_45284875的博客
10-18 705
开发记录笔记
上传文件传参 pc端vue的formData
qq_42440919的博客
07-25 424
if(ref.toString().indexOf('qrcode') >= 0) formData.append('noStbg', true)//添加参数。//添加参数并且重新命名文件名称。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1307
本文介绍了电子签名、图片合成、及预览功能
vue3使用递归组件渲染层级结构
最新发布
weixin_42234899的博客
07-25 481
vue3使用递归组件渲染层级结构
Vue系列面试题
qq_44186810的博客
07-23 1155
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
vue日历自定义组件
08-29
我很抱歉，但是我无法直接通过引用内容查看具体的图片和代码。然而，根据你提供的引用信息，我可以告诉你关于vue日历自定义组件的一些信息。 根据引用，这个组件目录可以提供给你一些关于vue日历自定义组件的相关代码和文件。 根据引用，这个vue日历组件支持农历和假期展示，并且可以自定义可选择的日期范围。 根据引用，在组件中使用这个vue日历组件，你需要在main.js中引入它。组件默认情况下会显示一个自定义的左侧icon。某一个日期可以出现选中状态，也可以使用圆点模式来表示选中状态。你可以通过传递一个包含active属性的数组对象来自定义某一天的数据。 总的来说，这个vue日历自定义组件提供了一些可定制化的功能，包括农历展示、假期展示以及可选择日期范围等。你可以根据你的需求在组件中进行相应的配置和使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue自定义日历组件](https://blog.csdn.net/weixin_38644883/article/details/88067612)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [vue日历组件，支持农历以及假期展示，可以自定义可选择日期范围](https://download.csdn.net/download/qq_29597215/86267518)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值