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

momentJs推导日历组件

实现效果:

代码:

引入momentjs然后封装两个函数构建出基本数据结构

import moment from 'moment';// 某月有多少天
export const getEndDay = (m) => m.daysInMonth();/*** @description 获取本月空值数据*  @param { Date } year {  } 年度*  @param { Number } month 月份*  @param { Date } current moment当天日期*/
export const getCalendar = ({ year, month, current }) => {// 最多6行, 每行为一周7天const totalDays = 7 * 6;// 获取这个月第一天具体日期const start = new Date(year, month - 1, 1);let lastEndDay = [];// 上个月的天数const lastDays = getEndDay(current.clone().subtract(1, 'month'));// 当前月的天数const nowDays = getEndDay(current);const currentDays = [...(new Array(nowDays))].map((v, i) => ({day: i + 1,})).map((v) => {const currentDate = v.day >= 10 ? `${moment(current).format('YYYY-MM')}-${v.day}` : `${moment(current).format('YYYY-MM')}-0${v.day}`;return {day: v.day,denyTime: moment().valueOf() > moment(`${currentDate} 23:59:59`).valueOf(),currentDate,};});if (start.getDay() === 0) {// 这个月1号为周日,则取上个月最后6天lastEndDay = [...new Array(lastDays)].map((v, i) => i + 1).filter((v) => v > lastDays - 6).map((v) => ({day: v,denyMonth: true,}));} else {lastEndDay = [...(new Array(lastDays))].map((v, i) => i + 1).filter((v, i) => i  > lastDays - start.getDay()).map((v) => ({day: v,denyMonth: true,}));}// 获取下个月补充天数const nextDays = [...new Array(totalDays - lastEndDay.length - currentDays.length)].map((v, i) => ({ day: i + 1, denyMonth: true }));const data = [...lastEndDay, ...currentDays, ...nextDays];return data;
};

页面代码部分:

<template><div><div class="flex-y-center flex-x-between border-t border-r border-l pad-y-xs pad-x-md"><div>{{ renderCalendarMonth }}</div><div class="text-right"><el-button size="small" @click="handleMonth(1)">上个月</el-button><el-button size="small" @click="handleMonth()">本月</el-button><el-button size="small" @click="handleMonth(2)">下个月</el-button></div></div><div class="border-a pad-a-sm"><div class="grid-week mar-b-sm"><div v-for="item in weekLabel" :key="item" class="text-center">{{ item }}</div></div><div class="grid-month-day"><divv-for="(item, idx) in CalendarDays":key="idx":class="{'text-center': 1,'grey-out-ban': item.denyMonth || item.denyTime,'active': item.currentDate === activeDay}"@click="handleDay(item)">{{ item.day }}</div></div></div>
</div>
</template>import moment from 'moment';
import { getCalendar } from '../request';export default {data() {return {weekLabel: ['一', '二', '三', '四', '五', '六', '七'],// 当前时间日历推导currentTime: moment(),// 日历挂表CalendarDays: [],// 选择日期activeDay: moment().format('yyyy-MM-DD'),// 月份切换activeMonth: 0,};},
computed: {// 日历具体年月份renderCalendarMonth() {const enumMonth = ['一', '二', '三', '四', '五', '六', '七', '八', '九',  '十', '十一', '十二'];const year = moment().subtract(this.activeMonth, 'months').format('yyyy');let month = moment().subtract(this.activeMonth, 'months').format('M');month = enumMonth[month - 1];return `${year}年${month}月`;},},
created() {this.init();},methods: {// 初始化init() {this.CalendarDays = getCalendar({year: moment().format('yyyy'), current: this.currentTime, month: moment().format('M'),});},// 月份切换handleMonth(type) {if (type) {if (type === 1) {this.activeMonth++;} else {this.activeMonth--;}const day = moment().subtract(this.activeMonth, 'months');this.CalendarDays = getCalendar({year: day.format('yyyy'),current: day,month: day.format('M'),});} else {this.activeMonth = 0;this.CalendarDays = getCalendar({year: moment().format('yyyy'), current: this.currentTime, month: moment().format('M'),});this.activeDay = moment().format('yyyy-MM-DD');}},handleDay(item) {if (item.denyMonth || item.denyTime) return;this.activeDay = item.currentDate;},},};
</script><style lang="scss" scoped>
.grid-week, .grid-month-day {display: grid;grid-template-columns: repeat(7, 1fr);gap: 10px;
}.grid-month-day {&>div {padding: 6px 0;box-sizing: border-box;border: 1px solid $base-border-color;&.grey-out-ban {background-color: #E9E9EB;cursor: not-allowed;}&:not(.grey-out-ban) {color: $base-color-primary;cursor: pointer;}&.active {border: 1px solid $base-color-primary;background-color: $base-color-primary;color: white;}}
}
</style>

结尾:这里贴代码就挺难受的,没有Vue只有html,果然这个时候用react就不错,不过思路已经提供了,先理清日历的每周对应天数结构,后面处理起来就容易许多。这里附上做的另一个日历效果图,代码就不贴了,js推导函数都差不多,不过是把日期天数的推导改下就可以了。

相关文章:

momentJs推导日历组件

实现效果: 代码&#xff1a; 引入momentjs然后封装两个函数构建出基本数据结构 import moment from moment;// 某月有多少天 export const getEndDay (m) > m.daysInMonth();/*** description 获取本月空值数据* param { Date } year { } 年度* param { Number } month …...

Linux C/C++ 原始套接字:打造链路层ping实现

在C/C中&#xff0c;我们可以使用socket函数来创建套接字。我们需要指定地址族为AF_PACKET&#xff0c;协议为htons(ETH_P_ALL)来捕获所有传入和传出的数据包。 可以使用sendto和recvfrom函数来发送和接收数据包。我们需要构建一个合法的链路层数据包&#xff0c;在数据包的头…...

TCP 粘包/拆包

文章目录 概述粘包拆包发生场景解决TCP粘包和拆包问题的常见方法Netty对粘包和拆包问题的处理小结 概述 TCP的粘包和拆包问题往往出现在基于TCP协议的通讯中&#xff0c;比如RPC框架、Netty等 TCP 粘包/拆包 就是你基于 TCP 发送数据的时候&#xff0c;出现了多个字符串“粘”…...

【Spring Boot 3】应用启动执行特定逻辑

【Spring Boot 3】应用启动执行特定逻辑 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总是要花…...

设计模式(行为型模式)观察者模式

目录 一、简介二、观察者模式2.1、事件接口及其实现2.2、观察者接口及其实现2.3、主题接口及其实现2.4、使用 三、优点与缺点 一、简介 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;当一个对象…...

Windows 版Oracle 数据库(安装)详细过程

首先到官网上去下载oracle64位的安装程序 第一步&#xff1a;将两个datebase文件夹解压到同一目录中。 当下载完成后,它里面是两个文件夹 win64_11gR2_database_1of2, win64_11gR2_database_2of2,我们需要把其中的一个database文件夹整合在一起(复制一个database文件夹到另一…...

编程实例分享,计费系统一定要安装灯光控制吗?佳易王计时计费管理系统软件V18.0教程说明

编程实例分享&#xff0c;计费系统一定要安装灯光控制吗&#xff1f;佳易王计时计费管理系统软件V18.0教程说明 一、前言 以下教程以 佳易王计时计费软件V18.0为例说明 1、该软件既可以接灯控&#xff0c;也可以不接灯控&#xff0c;如果接灯控&#xff0c;则点击开始计时的时…...

【webpack】优化提升

webpack优化提升 安装webpack相关内容向下兼容游览器-babel/polyfill进一步优化babel/polyfill模块联邦-共享模块如何提升构建性能通用环境下1&#xff0c;webpack更新到最新版本2&#xff0c;将loader应用于最少数量的必要模块3&#xff0c;引导&#xff08;每个额外的loader/…...

视频无损放大修复工具Topaz Video AI 新手入门教程

想要自学Topaz Video AI &#xff1f;Topaz Video AI 如何使用&#xff1f;这里给大家带来了视频无损放大修复工具Topaz Video AI 新手入门教程&#xff0c;快来看看吧&#xff01; 下载&#xff1a;Topaz Video AI for mac 导入您的文件 有两种方法可以将文件导入 Topaz Vid…...

《向量数据库指南》——Milvus Cloud 「部署」:简化部署一直在路上

“docker-compose 能部署分布式吗?”"单机部署为什么还依赖这么多组件?"“大家 Milvus Cloud 集群部署有没有实践过比较好的方案?” 作为一个开源数据库,是否能够进行快速部署,是所有工作的前提。在简化部署的道路上,社区从来没有停止过脚步。2023 年,社区推…...

使用x86架构+Nvidia消费显卡12G显存,搭建智能终端,将大模型本地化部署,说不定是未来方向,开源交互机器人设计

1&#xff0c;大模型本地部署 视频说明地址&#xff1a; https://www.bilibili.com/video/BV1BF4m1u769/ 【创新思考】&#xff08;1&#xff09;&#xff1a;使用x86架构Nvidia消费显卡12G显存&#xff0c;搭建智能终端&#xff0c;将大模型本地化部署&#xff0c;语音交互机…...

关于RabbitMQ面试题汇总

什么是消息队列&#xff1f;消息队列有什么用&#xff1f; 消息队列是一种在应用程序之间传递消息的通信机制。它是一种典型的生产者-消费者模型&#xff0c;其中生产者负责生成消息并将其发送到队列中&#xff0c;而消费者则从队列中获取消息并进行处理。消息队列的主要目的是…...

GoogleTest 单元测试

假设我们有两个函数 complexFunction 和 helperFunction&#xff0c;其中 complexFunction 调用了 helperFunction。我们将编写测试 complexFunction 的单元测试&#xff0c;并在调用 helperFunction 的地方打桩。 // 复杂函数示例 int helperFunction(int x) {return x * 2; …...

Mac利用brew安装mysql并设置初始密码

前言 之前一直是在windows上开发后段程序&#xff0c;所以只在windows上装mysql。(我记得linux只需要适应yum之类的命令即可) 另外, linux的移步 linux安装mysql (详细步骤,初次初始化,sql小例子,可视化操作客户端推荐) 好家伙&#xff0c;我佛了&#xff0c;写完当天网上发…...

R语言入门笔记2.2

ifelse语句 结构&#xff1a;ifelse(条件,表达式1,表达式2) #满足条件&#xff0c;则进入表达式1&#xff0c;否则为表达式2 例1&#xff1a; > a1 > ifelse(a<0,"a小于0",ifelse(a0,0,"a大于0")) [1] "a大于0"a1 - 这行代码给变量a…...

一般系统的请求认证授权思路【gateway网关+jwt+redis+请求头httpheader】

gateway&#xff1a;网关&#xff0c;我们都知道网关的作用就是对系统的所有请求&#xff0c;网关都会进行拦截&#xff0c;然后做一些操作&#xff08;例如&#xff1a;设置每个请求的请求头httpHeader&#xff0c;身份认证等等&#xff09;此时一般会使用到网关过滤器&#x…...

c# 正则表达式 帮助类

public class RegexHelper { /// <summary> /// 验证输入字符串是否与模式字符串匹配&#xff0c;匹配返回true /// </summary> /// <param name"input">输入字符串</param> /// <param nam…...

告别mPDF迎来TCPDF和中文打印遇到的问题

mPDF是一个用PHP编写的开源PDF生成库。它最初由Claus Holler创建&#xff0c;于2004年发布。原来用开源软件打印中文没有问题&#xff0c;最近发现新的软件包中mPDF被TCPDF代替了&#xff0c;当然如果只用西文的PDF是没有发现问题&#xff0c;但要打印中文就有点抓瞎了如图1&am…...

mysql 多数据源

依赖 <dependencies><!--mysql连接--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><!--多数据源--><dependency><g…...

uniapp 使用renderjs引入echarts

效果图&#xff1a; 1.1renderjs引入echarts 组件zmui-echarts.vue&#xff1a; <template><view class"zmui-echarts" :prop"option" :change:prop"echarts.delay"></view> </template><script>export defaul…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

Kubernetes 节点自动伸缩(Cluster Autoscaler)原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...

Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...