前端实现一个时间区间内,再次单选功能,使用Antd组件库内日历组件Calendar

需求:需要先让用户选择一个时间区间,然后再这个时间区间中,让用户再次去单选其种特殊日期。

思路:

1.先用Antd组件库中日期选择DatePicker.RangePicker实现让用户选择时间区间
2.在选择完时间区间后,用这个时间区间,弹出一个在这个时间区间范围内的日历组件Calendar
3.通过Calendar组件(日历)的onSelect(点击事件)获得点击value,然后通过dateCellRender(自定义渲染日期单元格)将选中的时间给用户颜色提示
4.最后将日期选择,还有区间内时间传给后端

第一步:先用Antd组件库中日期选择DatePicker.RangePicker实现让用户选择时间区间

页面:  

代码: 

<RangePicker
  defaultValue={[moment(archiveStartTime, 'YYYY-MM-DD'), moment(archiveEndTime, 'YYYY-MM-DD')]}
  onChange={this.archiveTime}
  format={'YYYY-MM-DD'}
/>
  archiveTime = async (date: any, dateString: any) => {  //日期改变
    //这时候  先弹框,并且暂存时间区间
    this.setState({
      restVis: true, //弹框
      dateString, //暂存时间区间
    })
  }

第二步,第三步

2.在选择完时间区间后,用这个时间区间,弹出一个在这个时间区间范围内的日历组件Calendar

3.通过Calendar组件(日历)的onSelect(点击事件)获得点击value,然后通过dateCellRender(自定义渲染日期单元格)将选中的时间给用户颜色提示

刚弹出:选中后:

弹框中装入一个日历组件 
<Modal
  title="选择休息日"
  visible={restVis} //显示
  onOk={this.restHandleOk} //确定
  onCancel={this.restHandleCancel}  //取消
>
  <Calendar
    className={styles.backgrand}  //改变默认选中蓝色的样式  不然每次点击颜色变化会影响用户选中判断
    fullscreen={false}  //不显示大日历
    onSelect={this.onSelect}  //点击时间
    dateCellRender={this.dateCellRender}  //日期渲染
    validRange={[moment(archiveStartTime), moment(archiveEndTime)]}  //可选时间区间,这边取上面日期选择组件的值
  />
</Modal>

 上面日历组件中用global改变组件样式

.backgrand {
  :global {
    .ant-fullcalendar-selected-day .ant-fullcalendar-value,
    .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value {
      background-color: #fff !important;
      color: #595959;
    }
  }
}

日历组件两个事件

onSelect = (date: any) => { // 点击选择日期回调
  const { restDay } = this.state; //选中值集合
  let vis = true  //判断这个值是否选中
  if (restDay && Array.isArray(restDay)) {
    restDay.map((item: any) => {
      if (item == moment(date).format('YYYY-MM-DD')) {
        vis = false
      }
    })
    if (vis) { restDay.push(moment(date).format('YYYY-MM-DD')) } //如果未选中  增加这个选中值
    if (!vis) { restDay.splice(restDay.indexOf(moment(date).format('YYYY-MM-DD')), 1) }//如果已选中  删除这个选中值
  }
  this.setState({ restDay })
}
dateCellRender = (val: any) => { //自定义渲染日期单元格,返回内容会被追加到单元格
  const { restDay } = this.state; //选中值集合
  if (restDay && Array.isArray(restDay) && restDay.length > 0 && restDay.indexOf(moment(val).format('YYYY-MM-DD')) > -1) {
    return <div style={{ position: 'relative' }}>
      <div style={{ //这边这个样式如果不处理,默认是在每个时间的下方
        color: 'red', backgroundColor: 'green',
        width: 25, height: 23, opacity: 0.4,
        position: 'absolute', left: 20, bottom: 18,
      }}></div>
    </div>
  }
}
最终Modal弹框打开关闭事件,其中restDay,dateString就是最终用户一套花里胡哨操作后,我们最终需要得到两个参数
restHandleOk = async () => {
  const { dateString, restDay } = this.state
  await this.updateState({
    archiveStartTime: dateString[0],
    archiveEndTime: dateString[1],
  });
  console.log('此时单独选中:', restDay)
  console.log('此时时间区间:', dateString)
  this.restHandleCancel()
}
restHandleCancel = () => {
  this.setState({ restVis: false })
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯专题-真题版含答案-【扑克牌排列】【放麦子】【纵横放火柴游戏】【顺时针螺旋填入】

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

低代码发展现状调研和思考

低代码开发是近年来迅速崛起的软件开发方法&#xff0c;让编写应用程序变得更快、更简单。有人说它是美味的膳食&#xff0c;让开发过程高效而满足&#xff0c;但也有人质疑它是垃圾食品&#xff0c;缺乏定制性与深度。你认为低代码到底是美味的膳食还是垃圾食品呢&#xff0c;…

linux系统启动时运行web程序

1.修改rc.local文件 执行命令如果找不到会报错command not found &#xff0c;使用全路径即可 找不到的话 可以使用which 命令 找到路径 后台查看执行日志 2.修改rc.local文件的权限 chmod x rc.local 然后reboot 可以查到进程和启动日志

CAD 审图意见的导出

看图的时候喜欢在图上直接标注意见&#xff0c;但是如果还要再把意见一行一行的导出到word里面就很麻烦&#xff0c;在网上看了一个审图软件&#xff0c;报价要980&#xff0c;而且那个审图意见做的太复杂了。 我的需求就是把图上标的单行文字和多行文字直接导出来就行&#x…

2机5节点系统潮流MATLAB仿真

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 电力系统潮流计算是电力系统最基本的计算&#xff0c;也是最重要的计算。所谓潮流计算&#xff0c;就是已知电网的接线方式与参数及运行条件&#xff0c;计算电力系统稳态运行各母线电压、各支路电流、功率及…

必要时进行保护性拷贝

保护性拷贝&#xff08;Defensive Copy&#xff09;是一种常见的编程实践&#xff0c;用于在传递参数或返回值时&#xff0c;创建副本以防止原始对象被意外修改。以下是一个例子&#xff0c;展示了何时进行保护性拷贝&#xff1a; mport java.util.ArrayList; import java.uti…

某60内网渗透之frp实战指南2

内网渗透 文章目录 内网渗透frp实战指南2实验目的实验环境实验工具实验原理实验内容frp实战指南2 实验步骤(1)确定基本信息。(2)查看frp工具的基本用法(3)服务端frp的配置(4)客户端frp的配置(5)使用frp服务 frp实战指南2 实验目的 让学员通过该系统的练习主要掌握&#xff1a…

【zetoro】文献管理工具使用

文章目录 一、zetoro文献管理二、论文中插入文献三、插件推荐&#xff1a;四、参考文献不多、为了方便时 一、zetoro文献管理 ➡️如何下载&#xff1a;搜索zotero即可找到官网直接下载安装 ➡️如何导入文献&#xff1a; 1本地文献拖拽导入 2各文献搜索平台上下载zotero格式…

PMP项目管理 - 质量管理

系列文章目录 现在的一切都是为将来的梦想编织翅膀&#xff0c;让梦想在现实中展翅高飞。 Now everything is for the future of dream weaving wings, let the dream fly in reality. PMP项目管理 - 质量管理 系列文章目录一、规划质量管理 - 关注工作需要达到的质量二、管理…

论文阅读:Lidar Annotation Is All You Need

目录 概要 Motivation 整体架构流程 技术细节 小结 概要 论文重点在探讨利用点云的地面分割任务作为标注&#xff0c;直接训练Camera的精细2D分割。在以往的地面分割任务中&#xff0c;利用Lidar来做地面分割是目前采用激光雷达方案进行自动驾驶的常见手段。来自Evocargo …

【Android12】WindowManagerService架构分析

Android WindowManagerService架构分析 WindowManagerService(以下简称WMS) 是Android的核心服务。WMS管理所有应用程序窗口(Window)的Create、Display、Update、Destory。 因为Android系统中只有一个WMS&#xff08;运行在SystemServer进程&#xff09;&#xff0c;可以称其为…

TCP报文头(首部)详解

本篇文章基于 RFC 9293: Transmission Control Protocol (TCP) 对TCP报头进行讲解&#xff0c;部分内容会与旧版本有些许区别。 TCP协议传输的数据单元是报文段&#xff0c;一个报文段由TCP首部&#xff08;报文头&#xff09;和TCP数据两部分组成&#xff0c;其中TCP首部尤其重…

用Flask搭建简单的web模型部署服务

目录结构如下&#xff1a; 分类模型web部署 classification.py import os import cv2 import numpy as np import onnxruntime from flask import Flask, render_template, request, jsonifyapp Flask(__name__)onnx_session onnxruntime.InferenceSession("mobilen…

ES6 面试题 | 14.精选 ES6 面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

NoSQL 数据库有哪些典型应用?

前面的内容介绍了数据库读写分离和分库分表相关知识&#xff0c;都是针对关系型数据库的&#xff0c;即通常说的 RDBMS。除了关系型数据库&#xff0c;NoSQL 在项目开发中也有着越来越重要的作用&#xff0c;与此同时&#xff0c;NoSQL 相关的内容也是面试的常客。今天我们一起…

单链表详解(附图解,结尾附全部源码)

下面开始带大家对单链表的增删查改进行图解 首先给大家介绍一下链表 链表就是每一个结构体中包含一个数据和一个结构体指针&#xff0c;这个指针就相当于锁链的作用将下一个结构体给锁住&#xff0c;但是每个结构体的空间是相对独立的。 图解&#xff1a; 1 首先实现尾插 如果…

智能优化算法应用:基于热交换算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于热交换算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于热交换算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.热交换算法4.实验参数设定5.算法结果6.参考文…

服务端监控工具:Nmon使用方法

一、认识nmon 1、简介 nmon是一种在AIX与各种Linux操作系统上广泛使用的监控与分析工具&#xff0c;它能在系统运行过程中实时地捕捉系统资源的使用情况&#xff0c;记录的信息比较全面&#xff0c; 并且能输出结果到文件中&#xff0c;然后通过nmon_analyzer工具产生数据文件…

spring 笔记九 Spring AOP

Spring 的 AOP 简介 什么是AOP AOP 为Aspect Oriented Programming 的缩写&#xff0c;意思为面向切面编程&#xff0c;是通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。 AOP 是OOP 的延续&#xff0c;是软件开发中的一个热点&#xff0c;也是Spring框架…

10 新字符设备驱动文件

一、新字符设备驱动原理 因为 register_chrdev 和 unregister_chrdev 两个函数是老版本驱动文件&#xff0c;现在可以用新字符设备驱动 API 函数。 1. 分配和和释放设备号 使用 register_chrdev 函数注册字符设备的时候只需要给定一个主设备号即可&#xff0c;但是这样会带来两…