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;
}

效果图

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

802.11 wireshark 抓包

80211 wireshark 抓包 前言配置 monitor软件配置wireshark 操作 前言 本人习惯使用 Omnipeek 抓包分析&#xff0c;所以 wireshark 的实验只讲到抓包完成。 Windows 环境采用 wireshark 抓包是比较麻烦的&#xff0c;因为支持在 Windows 环境中支持抓包的网卡并不多&#xff0…

Spring面试篇章——Spring基本概述

Spring 的基本概述 Spring学习的核心内容—一图胜千言 IOC&#xff1a;控制反转&#xff0c;可以管理 Java 对象AOP&#xff1a;切面编程JDBCTemplate&#xff1a;是Spring提供一套访问数据库的技术&#xff0c;应用性强&#xff0c;相对好理解声明式事务&#xff1a;基于IOC …

docker compse简介与安装

目录 1. Docker Compose 简介 2. Docker Compose 安装 2.1 在 Ubuntu 上安装 Docker Compose 2.1.1 通过 apt 安装 2.1.2 使用官方脚本安装最新版本 2.2 在 CentOS 上安装 Docker Compose 2.2.2 使用官方脚本安装最新版本 2.2.3 使用 pip 安装 2.3 在 openEuler 上安装…

Python面试宝典第25题:括号生成

题目 数字n代表生成括号的对数&#xff0c;请设计一个函数&#xff0c;用于能够生成所有可能的并且有效的括号组合。 备注&#xff1a;1 < n < 8。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;["((()))","(()())","(())()"…

【ArcGIS+CityEngine】自行制作Lod1城市大尺度白膜数据

数据准备 50多个城市建筑矢量数据 链接&#xff1a;https://pan.baidu.com/s/1FiwTfXDwQ6tMDRACAwUZwQ 提取码&#xff1a;DYSK 数据分析 数据属性Floor&#xff0c;为建筑物楼层信息&#xff0c;据此信息下面将在CityEngine软件生成Lod1白膜数据。 软件准备 CityEngi…

创建了Vue项目,需要导入什么插件以及怎么导入

如果你不知道怎么创建Vue项目,建议可以看一看这篇文章 怎么安装Vue的环境和搭建Vue的项目-CSDN博客 1.在idea中打开目标文件 2.系在一个插件Vue.js 3.下载ELement UI 在Terminal中输入 # 切换到项目根目录 cd vueadmin-vue # 或者直接在idea中执行下面命令 # 安装element-u…

[GYCTF2020]Blacklist1

打开题目 判断注入类型&#xff0c;输入1试试 输入2 输入1 判断为字符型注入 堆叠查询2;show databases;# 然后来输入2; show tables;#来查看数据库的表 然后我们通过FlagHere表来查看列输入2;show columns from FlagHere;# 来查看列 、 重新构造payload&#xff1a;0;HAND…

基于FPGA的高精度多通道同步AD采集系统开发及数字信号处理算法应用,基于FPGA的多通道同步AD采集系统开发及数字信号处理算法实现

FPGA多通道同步AD采集 AD7606 8通道16位高精度同步采集系统开发&#xff0c;采样率200KSPS&#xff0c;采集数据支持DDR3缓存、串口发送、USB2.0上传、千兆以太网上传等。 支持基于FPGA的数字信号处理算法开发 ID:77500703611886617 塞纳河山 FPGA多通道同步AD采集是一项基于…

官宣!新增博士硕士点审核结果已出!附查询方法

2024年7月31日&#xff0c;新增博士硕士学位授权结果正式公示&#xff01; 多所高校&#xff0c;新增博士和硕士学位授权点 大家可前往该网站查询&#xff1a;https://zjpy.cdgdc.edu.cn/sqshjggb 另外说明一下&#xff0c;这些学校不一定今年就开展招生工作 一切以学校的官…

9.Redis的Set类型

Redis的Set结构与java中的HashSet类似。 可以看做是一个value为null的HashMap。 特点 1.无序 2.元素不可重复 3.查找快 4.支持交集、并集、差集等功能 应用场景 实现共同关注&#xff0c;共同好友。 常见命令 sadd key 元素1 元素2 给set集合添加一个或多个元素 smem…

Kimi+AiPPT的正确打开方式!文档一键转换PPT!限时免费!

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,专注于分享AI全维度知识,包括但不限于AI科普,AI工具测评,AI效率提升,AI行业洞察。关注我,AI之路不迷路,2024我们一起变强。 我之前…

做管理,一定要避开这6个坑,才能成就优秀管理者

做管理&#xff0c;一定要避开这6个坑&#xff0c;才能成就优秀管理者 一、被平庸的员工绑架 要是领导不敢或者不愿意惩罚或者开除那些没完成任务的员工&#xff0c;那优秀的员工就会觉得&#xff0c;做得好做得差都一样&#xff0c;那谁还愿意努力呢&#xff1f; 二、总想改变…

基于双PI控制器结构的六步逆变器供电无刷直流电机调速simulink仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 无刷直流电机&#xff08;BLDCM&#xff09;原理 4.2 六步换相逆变器 4.3 双PI控制器设计 5.完整工程文件 1.课题概述 基于双PI控制器结构的六步逆变器供电无刷直流电机调速simulink仿真。双PI控制…

DockerCompose部署示例

目录 前言 1. 初识DockerCompose 2. 安装DockerCompose 3. 部署微服务项目 1&#xff09;找一个目录&#xff0c;创建一个新的cloud-demo文件夹。 2&#xff09;在cloud-demo文件夹创建一个docker-compose.yml文件&#xff0c;然后编写下面内容&#xff1a; 3&#xff09…

【视频讲解】后端增删改查接口有什么用?

B站视频地址 B站视频地址 前言 “后端增删改查接口有什么用”&#xff0c;其实这句话可以拆解为下面3个问题。 接口是什么意思&#xff1f;后端接口是什么意思&#xff1f;后端接口中的增删改查接口有什么用&#xff1f; 1、接口 概念&#xff1a;接口的概念在不同的领域中…

R语言统计分析——自编函数

参考资料&#xff1a;R语言统计分析【第2版】 一个函数的结构大致如此&#xff1a; myfunction<-function(arg1,arg2,...){ statements return(object) } 函数中的对象只在函数内部使用。返回对象的数据类型是任意的。 假设我们要编写一个函数&#xff0c;用来计算数据对象…

2、postgresql运行架构

2 运行架构 以为编译安装为模板讲解各个文件功能作用&#xff0c;切换为postgres用户 目录位置数据库数据目录/pgdata/10/data安装包目录/opt/pg10/ 2.1 安装包目录详解 -bash-4.2$ pwd /opt/pg10 -bash-4.2$ tree -L 1 . . ├── bin #应用程序 ├── include #c/c…

Debian12 安装Docker 用 Docker Compose 部署WordPress

服务器准备&#xff1a; 以root账号登录&#xff0c;如果不是root&#xff0c;后面指令需要加sudo apt update apt install apt-transport-https ca-certificates curl gnupg lsb-release添加GPG密钥&#xff0c;推荐国内源 curl -fsSL https://mirrors.aliyun.com/docker…

c语言指针中“数组名的理解”以及“一维数组传参”的本质

数组名的理解 数组名就是数组首元素的地址。 例如&#xff1a;输入一个数组的所有元素&#xff0c;再打印出来。 另一种写法 以上可以看出&#xff1a;*arri&#xff09; arr[i] 也即是&#xff1a;*(iarr)i[arr] 本质上无区别 1&#xff1a;数组就是数组&#xff0c;是一块…

DirectX修复工具下载安装指南:电脑dll修复拿下!6种dll缺失修复方法!

在日常使用电脑的过程中&#xff0c;不少用户可能会遇到“DLL文件缺失”的错误提示&#xff0c;这类问题往往导致程序无法正常运行或系统出现不稳定现象。幸运的是&#xff0c;DirectX修复工具作为一款功能强大的系统维护软件&#xff0c;能够有效解决大多数DLL文件缺失问题&am…