当前位置: 首页 > news >正文

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,星期六为 6curDays: 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,星期六为 6curDays: 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"><!-- 上个月 --><divv-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><!-- 当月 --><divv-for="item in curDays":key="item + 'cur'":class="['curday', { select: isSelected(curYear, item) }]"@click="selectDate(curYear, item)">{{ item }}</div><!-- 下个月 --><divv-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,星期六为 6curDays: 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.日历组件增强版------可自定义日期内容

未完待续

相关文章:

VUE篇之日历组件

1.简单日历组件展示 思路&#xff1a;根据当前月的第一天是星期几&#xff0c;来显示日期 <template><div class"wrap"><el-button click"preMonth">上个月</el-button><el-tag>当前年份{{ curYear }}</el-tag><e…...

【selenium】自动化使用 chrome 的 user-data-dir

jwensh2023.12.18 文章目录 背景当前位置默认位置windowsMac OS XLinuxChrome操作系统AndroidiOS系统 覆盖用户数据目录命令行环境&#xff08;Linux&#xff09;编写 AppleScript 包装器 (Mac OS X) 用户缓存目录在 Mac OS X 和 iOS 上&#xff0c;用户缓存目录源自配置文件目…...

pythonUnitTest框架

UnitTest框架 UnitTest参考文章&#xff1a;https://blog.csdn.net/qq_54219272/article/details/123265794 目标&#xff08;看完UnitTest框架该有的收获&#xff09; 掌握UnitTest框架的基本使用方法掌握断言&#xff08;判断实际结果和预期结果是否一致&#xff09;的使用方…...

微服务最佳实践:构建可扩展且高效的系统

微服务架构彻底改变了现代软件开发&#xff0c;提供了无与伦比的敏捷性、可扩展性和可维护性。然而&#xff0c;有效实施微服务需要深入了解最佳实践&#xff0c;以充分发挥微服务的潜力&#xff0c;同时避免常见的陷阱。在这份综合指南中&#xff0c;我们将深入研究微服务的关…...

源码赏析: 数据结构转换工具 configor (一)

一、configor 先贴地址 configor&#xff0c;先看configor的特性&#xff1a; Header-only & STL-likeCustom type conversion & serializationComplete Unicode supportASCII & Wide-character support 说白了&#xff0c;这个工具用于自定义类型的转换和序列化…...

使用java调用python批处理将pdf转为图片

你可以使用Java中的ProcessBuilder来调用Python脚本&#xff0c;并将PDF转换为图片。以下是一个简单的Java代码示例&#xff0c;假设你的Python脚本名为pdf2img.py&#xff1a; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader…...

机器学习——自领域适应作业

任务 游戏里面的话有很多跟现实不一样的情况。 想办法让中间的特征更加的接近&#xff0c;让feat A适应feat B&#xff0c;产生相对正常的输出。 在有标签数据和没有数据的上面进行训练&#xff0c;并能预测绘画图像。 数据集 训练5000张总数&#xff0c;每类有500张测试100…...

ValidatorUtil字段验证工具类

字段验证工具类 package com.aa.bb.cc.common.utils;import com.aa.bb.cc.common.exception.BusinessException; import org.apache.commons.collections.CollectionUtils; import org.apache.commons.lang3.StringUtils;import javax.validation.ConstraintViolation; import…...

Python 自动化之处理图片(一)

图片美化与大小调整 文章目录 图片美化与大小调整前言一、基本结构二、引入库三、用户输入模块四、图片美化模块五、大小调整模块总结 前言 本文主要分为两部分。一是图片的美化吧算是&#xff0c;主要从亮度、对比、色彩饱和度、锐度四个方面进行美化&#xff1b;二是图片的像…...

Axure动态面板的应用与ERP系统登录界面、主页左侧菜单栏、公告栏的绘制

目录 一、动态面板 1.1 简介 1.2 使用动态面板的原因 二、动态面板之轮播图实现案例 2.1 完成步骤 2.2 最终效果 三、动态面版之多方式登录案例 四、动态面板之后台主界面左侧菜单栏 五、ERP登录界面 六、ERP主界面菜单栏 七、ERP公告栏 八、登录页面跳转公告栏 一…...

电机(按工作电源分类)介绍

文章目录 一、什么是电机&#xff1f;二、按工作电源分类直流电机1.直流有刷电机结构工作原理&#xff1a;直流减速电机 2.直流无刷电机结构工作原理&#xff1a; 3.总结结构和工作原理&#xff1a;效率和功率损耗&#xff1a;调速性能&#xff1a;寿命和可靠性&#xff1a;应用…...

Web前端JS通过使用AudioWorkletNode() 获取 Video/Audio 视音频声道(左右声道|多声道)

写在前面&#xff1a; 在之前的博文Web前端JS如何获取 Video/Audio 视音频声道(左右声道|多声道)、视音频轨道、音频流数据中&#xff0c;介绍了通过使用AudioContext.createScriptProcessor()方法来获取视音频音轨&#xff08;声道&#xff09;数据。但由于W3C不再推荐使用该A…...

力扣LeetCode75题

为了面试&#xff0c;小伙伴们可以平时练下算法题&#xff0c;有备无患。 LeetCode 75 - 学习计划 - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台...

如何向领导汇报工作?一篇文章告诉你!

给领导汇报工作可以从两个方面考虑&#xff1a;一是工作汇报文件的制作&#xff1b;一是汇报方式。一份全面、清晰且准确的文件&#xff0c;加上一目了然的、科技满满的汇报方式&#xff0c;相比领导不满意都难&#xff5e;下面就让你全部get&#xff01; 一、工作汇报的文字内…...

GPT-4.5!!!

GPT-4 还没用明白&#xff0c;GPT-4.5 就要发布了。 最近&#xff0c;OpenAI 泄露了 GPT-4.5 的发布页面&#xff0c;除了进一步增强复杂推理和跨模态理解&#xff0c;GPT-4.5 增加了一个更加强大的功能——3D。 3D 功能的进一步支持&#xff0c;也就意味着多模态最后一块版图…...

kafka入门(四):kafka生产者发送消息

创建生产者实例和构建消息之后&#xff0c;就可以开始发送消息了。 发送消息主要有三种模式&#xff1a;发后即忘、同步、异步。 发后即忘&#xff1a; 就是直接调用 生产者的 send方法发送。 发后即完&#xff0c;只管往 kafka中发送消息&#xff0c;而不关心消息是否正确…...

redis集群模糊获取缓存redisKey

redis cluster集群删除指定模糊redisKey的信息 **public int deleteRedisKey(String key){AtomicReference<Integer> result new AtomicReference<>(0);busnessLogger.info("开始删除指定业务的模糊Key,deleteRedisKey:{}",key);try{Set<HostAndPor…...

100GPTS计划-AI翻译TransLingoPro

地址 https://poe.com/TransLingoPro https://chat.openai.com/g/g-CfT8Otig6-translingo-pro 测试 输入: 我想吃中国菜。 预期翻译: I want to eat Chinese food. 输入: 请告诉我最近的医院在哪里。 预期翻译: Please tell me where the nearest hospital is. 输入: 明天…...

Linux install manual 1Panel

前言 1Panel 是一个现代化、开源的 Linux 服务器运维管理面板。1Panel 的功能和优势包括: 快速建站:深度集成 Wordpress 和 Halo,域名绑定、SSL 证书配置等一键搞定;高效管理:通过 Web 端轻松管理 Linux 服务器,包括主机监控、文件管理、数据库管理、容器管理等;安全可…...

母婴服务品牌网站的效果如何

随着三胎政策落实及人们生活水平提升&#xff0c;母婴市场发展迅速上升&#xff0c;加之以90后、00后适龄生育的人群悦己消费加强&#xff0c;孕前孕后及婴儿本身就会使用相当好的服务&#xff0c;这也为市场带来了较大机会。 近几年&#xff0c;老品牌在不断加力&#xff0c;…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...