antd-react日期组件disabledDate不可选择的日期 (置灰)属性

server/2025/2/12 5:29:38/

需求:原定结项时间表单里回显为2025-02-06,延期时间的选择范围要设置从2025-02-07开始选择包括2.7号的; 2.7号之前的置灰,不可选择

 PC端部分代码:

javascript">// react的函数组件写法
const disabledDate = function (current) {console.log(current, 'current')const times = pro.proLimted ? pro.proLimted : '' // 从pro这恶对象里取出proLimted参数,即原定结项时间字段:2025-02-06 17:00:00console.log(pro.proLimted, 'pro.proLimted')// moment()里不能为空,否则报错,所以取值times的时候做下判断const proTIME = moment(times).format('YYYY-MM-DD') // 转化下时间格式, 类似为2025-02-06console.log(proTIME , 'proTIME')const d = new Date(proTIME ) //console.log(d, 'd')d.setDate(d.getDate() + 1)console.log(d.getDate(), 'd.getDate()')return current && current.valueOf() < d.getDate()
}<FormItem {...formItemLayout} label='延期结项时间'>{getFieldDecorator('csTime', {rules: [{require: true, message: '时间不能为空'}],initialValue: moment('csTime', 'YYYY-MM-DD')})(<DatePickerformat='YYYY-MM-DD'disabledDate={disabledDate}placeholder='请选择延期结项时间'/>)}
</FormItem>

  移动端端部分代码:

javascript">import { List, Flex, DatePicker } from 'antd-mobile'const minDateFun = () => {const proLimit = contents && contents[0] && contents[0].proLimitif(proLimit && proLimit !== undefined && proLimit !== null && proLimit !== ''){const d = moment().set({year: new Date(proLimit).getFullYear(),month: new Date(proLimit).getMonth(),date: new Date(proLimit).getDate() +1})return new Date(d)}
}const changeDatePick = (data) => {const proId = idsaveLimitedTime({ // 这块调接口proId, proLimited: moment(data).format(YYYY-MM-DD 17:00:00)})
}<div><Flex align='baseline'><Flex.Item style={{ flex: 2.8 }}><div>原定结项时间</div></Flex.Item><Flex.Item style={{ flex: 7.2 }}><div><DatePicker mode='date'title='请选择时间'extra='请选择结项时间'format='YYYY-MM-DD'minDate={new Date()}maxDate={new Date(moment().set({ yaer: new Date().getFullYear()+1, data: new Date().getDate() }))}onChange={data => changeDatePick(data)}><list.Item arrow='horizontal'>{projrctTime || '请选择结项时间'}</list.Item>   </DatePicker></div></Flex.Item></Flex>
</div><div><Flex align='baseline'><Flex.Item style={{ flex: 2.8 }}><div>延期结项时间</div></Flex.Item><Flex.Item style={{ flex: 7.2 }}><div><DatePicker mode='date'title='请选择时间'extra='&emsp'format='YYYY-MM-DD 17:00:00'minDate={minDateFun()}onChange={onChange}><list.Item arrow='horizontal'>{projrctTime || '请选择结项时间'}</list.Item>   </DatePicker></div></Flex.Item></Flex>
</div>


http://www.ppmy.cn/server/166967.html

相关文章

后盾人JS -- 异步编程,宏任务与微任务

异步加载图片体验JS任务操作 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title&g…

YOLOv11实战海洋动物图像识别

本文采用YOLOv11作为核心算法框架&#xff0c;结合PyQt5构建用户界面&#xff0c;使用Python3进行开发。YOLOv11以其高效的特征提取能力&#xff0c;在多个图像分类任务中展现出卓越性能。本研究针对5种海洋动物数据集进行训练和优化&#xff0c;该数据集包含丰富的海洋动物图像…

点云数据聚类处理流程

点云数据聚类处理流程 点云数据聚类处理是将点云数据中的点按照相似性划分为不同的组&#xff08;簇&#xff09;的过程&#xff0c;在目标识别、场景分析等领域有广泛应用。以下是一个通用的点云数据聚类处理流程&#xff1a; 1. 数据获取 激光雷达采集&#xff1a;利用激光…

Flutter 双屏双引擎通信插件加入 GitCode:解锁双屏开发新潜能

在双屏设备应用场景日益丰富的当下&#xff0c;移动应用开发领域迎来了新的机遇与挑战。如何高效利用双屏设备优势&#xff0c;为用户打造更优质的交互体验&#xff0c;成为开发者们关注的焦点。近日&#xff0c;一款名为 Flutter 双屏双引擎通信插件的创新项目正式入驻 GitCod…

嵌入式硬件篇---OpenMV串口流和缓冲区

文章目录 前言流和缓冲区1. 流&#xff08;Stream&#xff09;的含义定义在OpenMV中的体现 2. 缓冲区&#xff08;Buffer&#xff09;的含义定义在OpenMV中的实现 3. 流与缓冲区的协同工作数据发送流程数据接收流程 4. 缓冲区管理的关键方法发送缓冲区管理接收缓冲区管理示例代…

Android笔记【snippet】

一、 6、Card及ConstraintLayout线性布局 //定义单独的机器人单独一行的卡片 Composable fun RobotCard(robot: Robot,navController:NavController){Card(modifier Modifier.fillMaxWidth().wrapContentHeight().padding(5.dp),colors CardDefaults.elevatedCardColors(co…

学习 URL 传参中哪些字符是支持的,哪些是不支持的

URL 的结构 URL 由多个部分组成&#xff0c;包括协议、域名、路径、查询参数和片段标识符&#xff0c;其中&#xff0c;查询参数部分就是问号后面的内容&#xff0c;这部分使用键值对&#xff0c;中间用 & 分隔。比如&#xff0c;http://example.com/path?key1value1&…

剑指offer第2版:搜索算法(二分/DFS/BFS)

查找本质就是排除的过程&#xff0c;不外乎顺序查找、二分查找、哈希查找、二叉排序树查找、DFS/BFS查找 一、p39-JZ3 找出数组中重复的数字&#xff08;利用特性&#xff09; 数组中重复的数字_牛客题霸_牛客网 方法1&#xff1a;全部排序再进行逐个扫描找重复。 时间复杂…